WebKit 宽度未更新？

发布于 2024-07-29 16:49:08 字数 677 浏览 4 评论 0原文

我有一段在窗口调整大小时运行的代码。我正在拉动输入文本元素的 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

以前有人经历过这种情况吗？你知道为什么会这样吗？最重要的是，您知道如何解决这个问题吗？：）

谢谢。

原文

I have a piece of code which runs on window resize. I am pulling the width, and the outerWidth of a input text element.

This process works fine in every browser, except Webkit, which returns the proper result from outerWidth, but the result from width never changes from the on load original.

This is actual console output from my script when resizing the browser window (This is Chrome, but the same happens in 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

Has anyone experienced this before? Do you know why it happens? And most importantly, do you know how to work around it? :)

Thank you.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

稍尽春風 2024-08-05 16:49:08

这是我的测试用例。两者似乎都按预期工作（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>

Here is my test case. Both seem to work as expected (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>

回复收藏 0 原文

~没有更多了~