处理 IE 中的 JQuery/CSS 错误

Question

我有一些代码可以在页面加载/调整大小时最大化视频面板。我正在使用 JQuery 1.4.4，并且在 Chrome、Firefox 和 Safari 中一切正常。按照其他帖子中的一些示例，我根据屏幕上其他元素的渲染大小和样式调整视频面板大小。

function maximizeVideo(){
  var play_height = $(window).height()-42;
  var play_width = $PLAY.width() - $NAV.width();

  play_width -= parseInt($NAV.css("paddingLeft"), 10) + parseInt($NAV.css("paddingRight"), 10); 
  play_width -= parseInt($NAV.css("marginLeft"), 10) + parseInt($NAV.css("marginRight"), 10); 
  play_width -= parseInt($NAV.css("borderLeftWidth"), 10) + parseInt($NAV.css("borderRightWidth"), 10); 

  $NAV.css('height',play_height-16+"px");
  $VIDEO_PANEL.resize(play_width, play_height);
}

在 IE 中，css 访问器有时会返回 NaN。有没有更好的方法来考虑其他元素的渲染宽度？
如果没有，捕获这些错误的最佳方法是什么？

谢谢！

Answer 1

对于您的情况，我认为您应该查看 outerWidth 函数宽度。使用outerWidth(true)，我们可以获得元素的宽度，包括其边框、内边距和边距。因此，您可以将此行： 替换

var play_width = $PLAY.width() - $NAV.width();

为：

var play_width = $PLAY.width() - $NAV.outerWidth(true);

从而完全消除接下来的三行计算。

---

此外，height 和 width 函数不仅是 getter，也是 setter，因此这一行：

$NAV.css('height',play_height-16+"px");

可以重写为

$NAV.height(play_height - 16);