javascript - 处理 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函数而不是 width。使用 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);