Cross Browser offsetWidth

Question

У меня возникла проблема с использованием offsetWidth для разных браузеров. Эта разница в результатах вызывает некоторые странные макеты. Я создал очень маленький пример, который отображает то, что я вижу.

jsbin

HTML

<table id="tbl"> 
    <tr> 
    <td>Cell 1</td> 
    <td>Cell 2</td> 
    </tr> 
</table> 
<button onclick="calc()">Calculate Offset Width</button> 

<div>Cell 1 offsetWidth: <span id="c1offWidth"></span></div> 

JS

function calc(){ 
    document.getElementById('c1offWidth').innerHTML = 
     document.getElementById('tbl').children[0].children[0].offsetWidth; 
} 

CSS

Erik Meyer's Reset CSS

Когда я бегу это на хром, сафари и оперы возвращаемое значение для ширины ячейки 1 по смещению равно 72. При запуске этого на светлячок и IE9-10 возвращаемое значение 77.

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

Есть ли кросс-браузерное решение, которое всегда будет возвращать тот же результат? Я попытался использовать jQuery, но результаты были еще более запутанными.

EDIT Потому что каждый рекомендует использовать внешнюю ширину. Для этого я также создал jsbin. Результаты по-прежнему различаются в разных браузерах. Chrome возвращает 36; IE9-10 и Firefox вернуться 39.

jsbin updated

Answer 1

Поскольку вы отметили сообщение jQuery, я предполагаю, что решение jQuery приемлемо. Что случилось с outerWidth()?

Например:

function calc() 
{ 
    var the_width = $('#tbl tr:eq(0) td:eq(0)').outerWidth(); 
    $('#c1offWidth').html(the_width); 
} 

Использование JQuery приносит ряд преимуществ для таблицы (как вы можете видеть на уменьшение количества кода, необходимого выше). Вы также должны рассмотреть возможность использования неинтрузивных обработчиков событий. Например, удалить атрибут onclick из вашего button, и сделать это:

$(function() { 
    $('button').click(function() { 
     var the_width = $('#tbl tr:eq(0) td:eq(0)').outerWidth(); 
     $('#c1offWidth').html(the_width); 
    }); 
}); 

Пожалуйста, смотрите jsFiddle demo.

Answer 2

offsetWidth не является надежным кросс-браузер. Я бы рекомендовал вместо этого использовать jQuery's outerWidth().

$("#your-element").outerWidth(); 

См. DEMO.

Answer 3

Вы можете использовать jQuery's .outerWidth(), если вам нужно получить расчетную ширину между браузерами, включая границы и поля.

Answer 4

Фактическая проблема в вашем примере заключалась в том, что разные браузеры используют разные шрифты по умолчанию для рендеринга. И размер ячейки для ваших ячеек определяется содержимым. Если вы установили определенную ширину элемента (как указано в одном из комментариев), вы получите определенный и равный результат.

пс: не могут оставлять комментарии ...