代码之家 › 专栏 › 技术社区 › Alec Gorge

我想我在webkit(或jquery)中发现了一个bug,其他人能确认吗?[关闭]

google-chrome webkit safari jquery

Alec Gorge · 技术社区 · 15 年前

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

5 回复 | 直到 14 年前

hobbs 15 年前

chrome的dom inspector确认这是一个webkit问题;即使您尝试重写,DIV也会有很大的右边距。 margin-right . 迫使正确计算边际的一些因素包括 float: left 和 display: inline-block . 另外,如果您将该DIV放在另一个大小的DIV中,它的 outerWidth(true) 会给 innerWidth 对于包含的DIV,这可能是一个有用的现实解决方案——只需将其包装在一个DIV中, margin: 0; padding: 0; width: XXX .

Rudd Zwolinski 15 年前

这不是寻找外部宽度的错误。webkit实际上会将div渲染为具有较大的右边距。因为右边距(几乎)延伸到右边,所以得到的外部宽度更大。

我不确定这是否是呈现它的“正确”方法,但是如果有一个规范说右边距不应该扩展,那么这将是WebKit中的一个bug。

Will 14 年前

我的经验也证实了这一点——这是一个WebKit错误,需要修复。

Ole 14 年前

如果将输入字段的大小设置为1,它将修复chrome和safari中的bug-teset。

Uberlemurguy 15 年前

我也可以证实这一点。

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

我想知道Chrome4是否能修复这个问题。