我想我在WebKit（或jQuery）中发现了一个bug，其他人可以证实吗？

我相信我在WebKit中发现了一个错误。它涉及到jQuery中的outerWidth（true）（我假设outerHeight（true））。我想我在WebKit（或jQuery）中发现了一个bug，其他人可以证实吗？

在除Safari和Chrome之外的每个浏览器中，第三个框为200.在Safari和Chrome中，它几乎是我的屏幕宽度。

点击here看我的结果： inline image not found. http://x3non.com/image/alec/147/outerWidth%20true%20fail.png

您可以测试自己的位置：http://ramblingwood.com/sandbox/webkit-bug/test.html

我用这个测试文件：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <style type="text/css"> 
    input { 
     width: 50%; 
     height: 1em; 
     font-size: 1em; 
    } 
#testBox {margin-left:100px;width:100px;} 
#testBox2 {padding-left:100px;width:100px;} 
#testBox3 {border-left:100px black solid;width:100px;} 
    </style> 
    <script type="text/javascript"> 
    function init(){ 
     $('#w1').val($('#testBox').width()); 
     $('#ow1').val($('#testBox').outerWidth()); 
     $('#owt1').val($('#testBox').outerWidth(true)); 
     $('#w2').val($('#testBox2').width()); 
     $('#ow2').val($('#testBox2').outerWidth()); 
     $('#owt2').val($('#testBox2').outerWidth(true)); 
     $('#w3').val($('#testBox3').width()); 
     $('#ow3').val($('#testBox3').outerWidth()); 
     $('#owt3').val($('#testBox3').outerWidth(true)); 
    } 
    $(document).ready(function(){ 
     init(); 

     $(window).resize(function(){ 
     init(); 
     }); 
    }); 
    </script> 

</head> 
<body> 
<div id="testBox">test</div> 
    <p>width() <input type="text" id="w1" /></p> 
    <p>outerWidth() <input type="text" id="ow1" /></p> 
    <p>outerWidth(true) <input type="text" id="owt1" /></p> 

<div id="testBox2">test2</div> 
    <p>width() <input type="text" id="w2" /></p> 
    <p>outerWidth() <input type="text" id="ow2" /></p> 
    <p>outerWidth(true) <input type="text" id="owt2" /></p> 

<div id="testBox3">test3</div> 
    <p>width() <input type="text" id="w3" /></p> 
    <p>outerWidth() <input type="text" id="ow3" /></p> 
    <p>outerWidth(true) <input type="text" id="owt3" /></p> 
</body> 
</html>

来源

2009-09-20 Alec Gorge

Chrome的DOM检查器确认这是一个WebKit问题;即使您尝试覆盖margin-right，div也会获得较大的右边距。有些东西强制保证金计算正确包括float: left和display: inline-block。另外，如果您将div放在另一个大小的div内，它的outerWidth(true)将给出包含div的innerWidth，这可能是一个有用的真实世界的解决方法 - 只需将其包装在margin: 0; padding: 0; width: XXX的div中即可。

来源

2009-09-20 03:13:22 hobbs