Question

我现在正在改进一个网站 - http://vse-v-nas.com.ua（链接只是为了重现步骤，如果有人想要更深入一些）。

右栏内容：

// html
<td id="sidebar-right">...</td>
// css
#sidebar-right {
  width: 209px;
  padding: 10px;
}

即。 $（'＃sidebar-right'）。width（）应为229px 并且它在Chrome中，但它在FF 8.0.1和IE 9.0.3中的值为“245px”

我不知道为什么FF和IE中的内容的右列宽度是其他的，而不是Chrome，但是我希望那个图像（在右上角 - $（'img.header-image'））与下面的右栏相同（就像在Chrome中一样）。

我在标记结束前将脚本添加到正文中，以便为图像和右侧边栏设置相等的宽度。

<script type="text/javascript" language="javascript">
  $(document).ready(function () {
    var $headerImage = $('img.header-image');
    var $rightSidebar = $('#sidebar-right');

    // in this line $rightSidebar.width() is 229px in every browser...

    $rightSidebar.resize(function() {
      // event handler doesn't occur after width changing in IE and FF...
      alert($headerImage.width());
      alert($(this).width());
    });
  });
</script>

事件处理程序不会发生，但页面加载后大小会发生变化。任何人都有想法帮助我解决这个问题！

Answer 1

调整大小处理程序不适用于页面的div /元素。查看http://benalman.com/projects/jquery-resize-plugin/。它是为处理这些类型的情况而创建的插件。

Answer 2

听起来上面的答案已经回答了你的直接问题。至于为什么它在Safari和Firefox中为245，它可能是由不同浏览器推测的默认CSS，特别是边界间距，因为你使用了很多表。内部内容越大将迫使侧边栏div宽于229px。

'resize'事件处理程序不会发生

2 个答案: