我相信我在WebKit中发现了一个bug.它在jQuery中涉及outerWidth(true)(我假定outerHeight(true)).
在每个浏览器中,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>
