Почему jQuery.css ('width') возвращает разные значения в разных браузерах? - PullRequest
Новая
       15

Почему jQuery.css ('width') возвращает разные значения в разных браузерах?

4 голосов
/ 08 марта 2012

Я написал некоторый код jQuery, который считывает ширину столбцов в таблице и применяет их к другой таблице.

На моей странице есть ТАБЛИЦА, подобная этой: 

<table style='table-layout:fixed;'>
     <tbody id='myTableBody'>
         <tr>
             <td style='width:100px;'>foo</td>
             <td style='width: 40px;'>bar</td>
         </tr>
     </tbody>
</table>

Я написал следующий код jQuery для чтения свойств ширины css этой таблицы: 

var colWidths = [];
var cells = $('#myTableBody').find('td');
for (i = 0; i < cells.length; i++)
    colWidths.push($(cells[i]).css('width'));

После запуска кода я ожидаю, что colWidths будет [100, 40], а в FireFox, это.Однако в IE8 это [92,32].Это разрывает мою страницу в IE, которая зависит от правильности значений.

Я считаю, что может быть уместно, что моя таблица содержится в элементе jQuery-ui-tabs, и я знаю, что jQuery-ui cssможет делать странные вещи, поэтому я не удивлюсь, если это как-то связано с этим.

Почему jQuery.css ('width') не возвращает ожидаемое мной значение в IE8?Что я могу с этим поделать?

Ответы [ 2 ]

7 голосов
/ 08 марта 2012

JQuery нормализует обработку браузера в этой ситуации через $().width().

css("width") - это другой атрибут / свойство, которое не нормализовано, а вместо этого извлекает значение CSS для элемента (ов). width() - это «фактический размер в домене», но он не учитывает отступы и поля, где это применимо, когда css("width") только извлекает значение CSS. Как уже упоминалось ниже в этом ответе, .outerWidth() будет делать то, что выполняет .width(), но включает в себя отступы и поля, представленные собственным браузером.

Короче говоря: 

$(this).width() != $(this).css("width")

Хороший параллельный пример: 

$(this).css("width")

ближе к 

$(this).attr("name")

чем $(this).width() или $(this).height().

Редактировать:

Вот кое-что, что я только что добавил и увидел, что также иллюстрирует разницу: 

$(this).css("height", "auto");
alert($(this).height());

Предупреждение будет иметь числовое значение (в пикселях).

1 голос
/ 27 сентября 2014

Я столкнулся с той же проблемой, пытаясь определить ширину тела и загрузить определенные сценарии, и я обошел это таким образом. Может вам тоже помочь. 

$('body,html').css({'overflow':'hidden'});
var width = $('body').width();
$('body,html').css({'overflow':''});

это дает одинаковое значение во всех основных браузерах

`

...