Cross Browser offsetWidth

Question

Ho riscontrato un problema con l'utilizzo di offsetWidth su diversi browser. Questa differenza nei risultati sta causando alcuni strani layout. Ho creato un esempio molto piccolo che mostra ciò che sto vedendo.

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

Quando ho eseguito questo su Chrome, Safari, Opera e il valore restituito per la larghezza di offset cella 1 di è 72. Quando eseguo questo su Firefox e IE9-10 il valore restituito è 77.

ero sotto l'impressione questo era il modo migliore per calcolare la larghezza di un elemento compreso il padding e il bordo.

Esiste una soluzione cross browser che restituirà sempre lo stesso risultato? Ho provato ad usare jQuery ma i risultati sono stati ancora più confusi.

EDIT Poiché tutti consigliano outerWidth, ho creato anche un jsbin. I risultati sono ancora diversi tra i vari browser. Chrome restituisce 36; IE9-10 e Firefox restituiscono 39.

jsbin updated

Answer 1

Poiché hai taggato il post con jQuery, suppongo che una soluzione jQuery sia accettabile. Cosa c'è che non va con outerWidth()?

Ad esempio:

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

Utilizzando jQuery porta una serie di vantaggi al tavolo (come si può vedere dalla ridotta quantità di codice necessario sopra). Dovresti anche prendere in considerazione l'utilizzo di gestori di eventi non intrusivi. Ad esempio, rimuovere l'attributo onclick dal button, e fare questo:

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

prega di consultare i jsFiddle demo.

Answer 2

offsetWidth non è affidabile cross-browser. Vorrei raccomandare l'uso di jQuery outerWidth() invece.

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

Vedere DEMO.

Answer 3

È possibile utilizzare jQuery .outerWidth() se è necessario ottenere una larghezza calcolata per più browser, inclusi elementi come bordi e margini.

Answer 4

L'effettivo problema nell'esempio è che i diversi browser utilizzano diversi tipi di carattere predefiniti per il rendering. E il dimensionamento della scatola per le tue celle è definito dal contenuto. Se si imposta una larghezza definita per l'elemento (come indicato correttamente in uno dei commenti) si otterrà il risultato definito e uguale.

ps: non possono inserire commenti ...