我想我在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