处理 IE 中的 JQuery/CSS 错误

【问题标题】：Handling JQuery/CSS errors in IE处理 IE 中的 JQuery/CSS 错误
【发布时间】：2010-12-15 11:04:15
【问题描述】：

我有一些代码可以在页面加载/调整大小时最大化视频面板。我正在使用 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。有没有更好的方法来解释其他元素的渲染宽度？
如果不是，那么捕获这些错误的最佳方法是什么？

谢谢！

【问题讨论】：

$ALL_CAPS 表示在此函数之外定义的 jQuery 对象。 resize(w,h) 函数具有处理调整视频 div 大小和放置视频控制元素、历史记录等的内部逻辑。AFAIK 不可能使用纯 CSS 的解决方案。

标签： javascript jquery css internet-explorer width

【解决方案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);

【讨论】：