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

Я написал код jQuery, который читает ширину столбцов в таблице и применяет их к другой таблице.Почему jQuery.css ('width') возвращает разные значения в разных браузерах?

На моей странице есть таблица вроде этого:

<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? Что я могу сделать с этим?

источник

2012-03-07 Daniel Allen Langdon

Я получаю 100 и 40 в IE8: http://jsfiddle.net/QhXjS/ –

Ваша страница действительный HTML 4,01 страница? Возможно, вы активировали [quirksmode] (http://www.quirksmode.org/css/quirksmode.html) в IE8. – Zeta

Спасибо, @Rob W. Я уверен, что на моей странице есть что-то, что как-то заставляет меня получить неправильное значение. –

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

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

Вкратце:

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

Хороший пример параллельной заключается в следующем:

$(this).css("width")

ближе к

$(this).attr("name")

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

Edit:

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

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

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

источник

2012-03-07 20:38:29

В этом случае, что я могу сделать, чтобы получить фактическое значение ширины CSS? –

Вам действительно нужно значение «CSS» ширины? Или фактический размер в окне браузера клиента? $ (this) .width() - это то, как выглядит фактическая видимая ширина элемента в собственном браузере. –

Попробуйте .outerWidth() –

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

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

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

источник

2014-09-27 15:05:59 Anush

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

ответ

Смежные вопросы