Cross Browser offsetWidth

Question

Ich habe ein Problem mit der Verwendung von OffsetWidth über verschiedene Browser. Dieser Unterschied in den Ergebnissen verursacht einige seltsame Layouts. Ich habe ein sehr kleines Beispiel erstellt, das anzeigt, was ich sehe.

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

Wenn ich dies auf Chrom laufen, Safari und Opera der Wert für die Zelle 1 der Versatzbreite zurückgeführt wird 72. Wenn ich dies laufen auf den folgenden IE9-10 und der zurückgegebene Wert ist 77.

I war Unter dem Eindruck war dies der beste Weg, um die Breite eines Elements einschließlich Polsterung und Rand zu berechnen.

Gibt es eine Cross-Browser-Lösung, die immer das gleiche Ergebnis liefert? Ich habe versucht, jQuery zu verwenden, aber die Ergebnisse waren noch verwirrender.

BEARBEITEN Weil jeder outwardWidth empfiehlt, habe ich auch einen jsbin dafür gemacht. Die Ergebnisse unterscheiden sich immer noch in den verschiedenen Browsern. Chrome gibt 36 zurück; IE9-10 und Firefox zurückkehren 39.

jsbin updated

Answer 1

Da Sie den Beitrag mit jQuery getaggt haben, gehe ich davon aus, dass eine jQuery-Lösung akzeptabel ist. Was ist los mit outerWidth()?

Zum Beispiel:

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

jQuery bringt eine Reihe von Vorteilen auf den Tisch (wie Sie durch die reduzierte Menge an Code oben benötigt sehen). Sie sollten auch in Betracht ziehen, nicht-intrusive Event-Handler zu verwenden. Zum Beispiel, entfernen Sie das onclick Attribut aus button, und dies tun:

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

Bitte beachten Sie die jsFiddle demo.

Answer 2

offsetWidth ist nicht zuverlässig, Cross-Browser. Ich würde empfehlen, stattdessen outerWidth() von jQuery zu verwenden.

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

Siehe DEMO.

Answer 3

Sie können .outerWidth() von jQuery verwenden, wenn Sie eine browserübergreifende berechnete Breite einschließlich Rand- und Randangaben benötigen.

Answer 4

Das eigentliche Problem in Ihrem Beispiel war, dass verschiedene Browser verschiedene Standardschriftarten für das Rendern verwenden. Und die Box-Sizing für Ihre Zellen ist durch den Inhalt definiert. Wenn Sie eine bestimmte Breite für das Element festlegen (wie in einem der Kommentare korrekt angegeben), erhalten Sie das definitive und gleiche Ergebnis.

ps: kann Kommentare nicht schreiben ...