我想我在 WebKit（或 jQuery）中发现了一个错误，其他人可以确认吗？ [关闭]答案

【问题标题】：I think I found a bug in WebKit (or jQuery), can others confirm? [closed]我想我在 WebKit（或 jQuery）中发现了一个错误，其他人可以确认吗？ [关闭]
【发布时间】：2010-11-29 19:47:46
【问题描述】：

我相信我在 WebKit 中发现了一个错误。它涉及 jQuery 中的 outerWidth(true) （我假设为 outerHeight(true) ）。

在除 Safari 和 Chrome 之外的所有浏览器中，第三个框都是 200。在 Safari 和 Chrome 中，它（几乎）是我屏幕的宽度。

点击here查看我的结果：
_{（来源：x3non.com）}

您可以在这里自己测试：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>

【问题讨论】：

标签： jquery safari webkit google-chrome

【解决方案1】：

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

【讨论】：

【解决方案2】：

查找外部宽度不是错误。 Webkit 实际上将 div 呈现为具有较大的右边距。由于右边距（几乎）延伸到右边缘，因此您会得到更大的外部宽度。

我不确定这是否是呈现它的“正确”方式，但如果有规范说右边距不应延伸，那么这将是 WebKit 中的一个错误。

【讨论】：

无论哪种情况，写跨浏览器代码真的很烦人。

【解决方案3】：

我的经验也证实了这一点 - 这是一个 Webkit 错误，需要修复。

【讨论】：

【解决方案4】：

如果您在输入字段中将大小设置为 1，它会修复错误 - Chrome 和 Safari 中的 testet

【讨论】：

【解决方案5】：

我也可以确认一下。

Webkit 这样做真的很奇怪，我无法想象为什么有人会认为这是个好主意。

我想知道 Chrome 4 是否解决了这个问题。

【讨论】：