WebKit 宽度没有更新？答案

【问题标题】：WebKit width not updating?WebKit 宽度没有更新？
【发布时间】：2010-11-16 04:36:15
【问题描述】：

我有一段代码在调整窗口大小时运行。我正在拉 width 和输入文本元素的 outerWidth。

这个过程在所有浏览器中都能正常工作，除了 Webkit，它从 outerWidth 返回正确的结果，但从 width 返回的结果永远不会改变 来自加载原件。

这是调整浏览器窗口大小时脚本的实际控制台输出（这是 Chrome，但在 Safari 4 中也是如此）：

outerWidth: 772
width: 772
outerWidth: 773
width: 772
outerWidth: 773
width: 772
outerWidth: 794
width: 772
outerWidth: 794
width: 772
outerWidth: 815
width: 772
outerWidth: 815
width: 772
outerWidth: 820
width: 772
outerWidth: 837
width: 772

以前有人经历过吗？你知道为什么会这样吗？最重要的是，您知道如何解决它吗？ :)

谢谢。

【问题讨论】：

你能发布一些代码吗？我刚刚尝试使用 Safari 4 并且都按预期工作。

标签： javascript jquery webkit width

【解决方案1】：

这是我的测试用例。两者似乎都按预期工作（Safari 4）。

<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: 2em;
      font-size: 1em;
    }
  </style>
</head>
<body>
  <p>
    <input type="text" id="w" />
  </p>
  <p>
    <input type="text" id="ow" />
  </p>
  <script type="text/javascript">
    function init(){
      $('#w').val($('#w').width());
      $('#ow').val($('#ow').outerWidth());
    }
    $(function(){
      init();

      $(window).resize(function(){
        init();
      });
    });
  </script>
</body>
</html>

【讨论】：

在 Safari 4 中效果很好。也许是旧的 jQuery 版本？