Cross Browser offsetWidth

Question

Tôi đã gặp sự cố khi sử dụng offsetWidth trên các trình duyệt khác nhau. Sự khác biệt trong kết quả này gây ra một số bố trí lạ. Tôi đã tạo ra một ví dụ rất nhỏ hiển thị những gì tôi đang nhìn thấy.

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

Khi tôi chạy trên Chrome, Safari, và opera giá trị trả về cho chiều rộng bù di động 1 là 72. Khi tôi chạy trên firefox và IE9-10 giá trị trả về là 77.

tôi theo ấn tượng, đây là cách tốt nhất để tính toán chiều rộng của một phần tử bao gồm phần đệm và đường viền.

Có giải pháp trình duyệt chéo nào sẽ luôn trả về cùng một kết quả không? Tôi đã thử sử dụng jQuery nhưng kết quả thậm chí còn khó hiểu hơn.

CHỈNH SỬA Vì mọi người đều đề xuất outerWidth Tôi cũng đã tạo một jsbin cho điều đó. Kết quả vẫn khác nhau giữa các trình duyệt. Chrome trả về 36; IE9-10 và Firefox trở lại 39.

jsbin updated

Answer 1

Vì bạn đã gắn thẻ bài đăng với jQuery, tôi cho rằng giải pháp jQuery có thể chấp nhận được. Có gì sai với outerWidth()?

Ví dụ:

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

Sử dụng jQuery mang lại một số lợi thế cho bảng (như bạn có thể nhìn thấy bởi số lượng giảm của mã cần thiết ở trên). Bạn cũng nên cân nhắc việc sử dụng trình xử lý sự kiện không xâm phạm. Ví dụ, loại bỏ các thuộc tính onclick từ button của bạn, và làm điều này:

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

Hãy xem jsFiddle demo.

Answer 2

offsetWidth là không đáng tin cậy qua trình duyệt. Tôi khuyên bạn nên sử dụng jQuery's outerWidth() để thay thế.

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

Xem DEMO.

Answer 3

Bạn có thể sử dụng jQuery .outerWidth() nếu bạn cần để có được chiều rộng tính toán trên nhiều trình duyệt bao gồm những thứ như biên giới và lề.

Answer 4

Sự cố thực tế trong ví dụ của bạn là trong các trình duyệt khác nhau sử dụng phông chữ mặc định khác nhau để hiển thị. Và kích thước hộp cho các ô của bạn được xác định bởi nội dung. Nếu bạn đặt chiều rộng xác định cho phần tử (như được nêu chính xác trong một trong các nhận xét), bạn sẽ nhận được kết quả xác định và bằng nhau.

ps: không thể đăng nhận xét ...