我想我在WebKit(或jQuery)中发现了一个bug,其他人可以确认吗？

我相信我在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>

解决方法

Chrome的DOM检查员确认这是一个WebKit问题;即使您尝试覆盖边缘权利,该div也会获得较大的右边距.强制边界计算正确的一些东西包括float：left和display：inline-block.另外,如果把div放在另一个大小的div中,它的outerWidth(true)将给出包含div的innerWidth,这可能是一个有用的现实世界的解决方法 – 只是将它包装在一个div中,边距为0;填充：0;宽度：XXX.

原文地址：https://www.jb51.cc/jquery/179861.html

我想我在WebKit(或jQuery)中发现了一个bug,其他人可以确认吗？

解决方法

相关推荐