ie8 $(window).width() 值为0 问题

最新推荐文章于 2019-07-15 18:13:57 发布

原创最新推荐文章于 2019-07-15 18:13:57 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#兼容性 #ie 8

javascript 专栏收录该内容

3 篇文章

订阅专栏

在调试IE8兼容性问题时，发现弹框无法居中，部分正常。经过排查，发现是由于在JSP页面中，`<include>`标签位于文档类型声明之前，导致IE8以怪异模式渲染，使得$(window).width()返回0。修正`<include>`标签的位置后，问题得到解决。提醒开发者注意避免此类埋雷。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这周工作调试兼容性问题，好几年没弄这些了，重操旧业啊

遇到的第一个问题就是：

ie8 弹框不居中，关键是有的居中，有的不居中。页面框架是基于jQuery UI，jQuery本身的dialog肯定没问题啊，要是有问题也不可能一部分显示正常了，而且我看了jQuery UI 的demo，ie8 妥妥的，没问题。

我们是这么用的，先封装了一个jyDialog,把内容创建之后，再调用jQuery UI 的 dialog。

that.dialog=that.container.dialog(dialogJson);

我一开始就分析显示正常的和显示不正常的写法有何不同，一个加载内容是 iframe,一个是常规页面。纠结啊，打断点啊，都定位不到问题。好崩溃~~~~~~

然后由于嵌套太深,IE8还看不了iframe内容。我就把那个弹框页面单摘出来，在我们封装那个jyDialog 打断点，一步一步，一遍一遍。都定位不了问题，貌似也没问题。

然后我就看jQuery UI的dialog处的源码，一步一步，终于找到

this._position();

_position: function() {
		// Need to show the dialog to get the actual offset in the position plugin
		var isVisible = this.uiDialog.is( ":visible" );
		if ( !isVisible ) {
			this.uiDialog.show();
		}
		<span style="color:#FF0000;">this.uiDialog.position( this.options.position ); </span>
		if ( !isVisible ) {
			this.uiDialog.hide();
		}
	},

$.fn.position = function( options ) {
	...
       <span style="color:#FF0000;">dimensions = getDimensions( target );</span>
	if ( target[0].preventDefault ) {
		// force left top to allow flipping
		options.at = "left top";
	}
	<span style="color:#FF0000;">targetWidth = dimensions.width;</span>
	targetHeight = dimensions.height;
	targetOffset = dimensions.offset;
	alert(targetWidth);
        ...

dimensions 封装的是window 对象的宽和高，在其他浏览器宽度是1903，到ie8就是0；OK！！！找到问题所在，

然后百度了一下有没有同胞遇到相似问题，果然有，虽然不完全一样，但是好像得IE8 渲染模式的问题，没有文档声明，IE就以怪异模式来渲染页面，此种情况$(window).width()获取的就是0.

然后我就看页面，jsp页面，有声明啊，但是有一个include标签写在了声明前面，HTML外面，修改后，显示正常。

维护别人的代码就是这样啊，层层坑。至此，问题解决。

最后一句，排雷工作比挖坑埋雷工作难好多，请谨慎埋雷！