javascript 跨浏览器偏移宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14990963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cross Browser offsetWidth
提问by Mark Meyer
I've been having an issue with using offsetWidth across different browsers. This difference in results is causing some strange layouts. I've created a very small example that displays what I'm seeing.
我在跨不同浏览器使用 offsetWidth 时遇到了问题。结果的这种差异导致了一些奇怪的布局。我创建了一个非常小的示例来显示我所看到的内容。
HTML
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
js
function calc(){
document.getElementById('c1offWidth').innerHTML =
document.getElementById('tbl').children[0].children[0].offsetWidth;
}
CSS
CSS
When I run this on chrome, safari, and opera the value returned for Cell 1's offset width is 72. When I run this on firefox and IE9-10 the value returned is 77.
当我在 chrome、safari 和 opera 上运行它时，单元 1 的偏移宽度返回的值为 72。当我在 Firefox 和 IE9-10 上运行它时，返回的值为 77。
I was under the impression this was the best way to calculate the width of an element including padding and border.
我的印象是这是计算元素宽度（包括填充和边框）的最佳方法。
Is there a cross browser solution that will always return the same result? I tried using jQuery but the results were even more confusing.
是否有一个跨浏览器解决方案总是会返回相同的结果？我尝试使用 jQuery，但结果更令人困惑。
EDITBecause everyone is recommending outerWidth I made a jsbin for that also. The results still differ across browsers. Chrome returns 36; IE9-10 and Firefox return 39.
编辑因为每个人都推荐outerWidth，所以我也为此做了一个jsbin。结果仍然因浏览器而异。Chrome 返回 36；IE9-10 和 Firefox 返回 39。
采纳答案by BenM
Since you tagged the post with jQuery, I assume that a jQuery solution is acceptable. What's wrong with outerWidth()?
由于您使用 jQuery 标记了帖子，因此我认为 jQuery 解决方案是可以接受的。怎么了outerWidth()？
For example:
例如：
function calc()
{
var the_width = $('#tbl tr:eq(0) td:eq(0)').outerWidth();
$('#c1offWidth').html(the_width);
}
Using jQuery brings a number of advantages to the table (as you can see by the reduced amount of code needed above). You should also consider using non-intrusive event handlers, too. For example, remove the onclickattribute from your button, and do this:
使用 jQuery 为该表带来了许多优势（正如您从上面所需的代码量减少所看到的）。您还应该考虑使用非侵入式事件处理程序。例如，onclick从您的 中删除该属性button，然后执行以下操作：
$(function() {
$('button').click(function() {
var the_width = $('#tbl tr:eq(0) td:eq(0)').outerWidth();
$('#c1offWidth').html(the_width);
});
});
Please see the jsFiddle demo.
请参阅jsFiddle 演示。
回答by Surgeon
The actual problem in your example was in that different browsers use different default fonts for rendering. And box-sizing for your cells is defined by content. If you set definite width for the element (as correctly stated in one of the comment) you'll get the definite and equal result.
您示例中的实际问题在于不同的浏览器使用不同的默认字体进行渲染。单元格的框大小由内容定义。如果您为元素设置了明确的宽度（如其中一条评论中所述），您将获得明确且相等的结果。
ps: can't post comments...
ps：不能发表评论...
回答by zakangelle
offsetWidthis not reliable cross-browser. I would recommend using jQuery's outerWidth()instead.
offsetWidth是不可靠的跨浏览器。我建议改用 jQuery outerWidth()。
$("#your-element").outerWidth();
See DEMO.
见演示。
回答by Ruben Infante
You can use jQuery's .outerWidth()if you need to get a cross-browser calculated width including things like borders and margin.
.outerWidth()如果您需要获得跨浏览器计算的宽度（包括边框和边距），您可以使用 jQuery 。
