IE7 beta2的CSS兼容性
注意,在ie7正版发布之前,以下提到所有内容都是有可能变化的。
盒模型变了!!!
这恐怕是会让那些使用web标准建设大型网站的开发者感到背脊发凉的变化,不过不用太担心,主要的变化是在盒模型对溢出(overflow)内容的处理方法。
假设有一个100px宽100px高的盒子,在这个盒子里放一个200px宽200px高的图片。目前ie的正理方法是自动把盒子“撑大”到200px见方。而ie7 beta2的处理方法和ff是一致的:盒子不变,溢出的部分在盒子外面被渲染。也就是说盒子的overflow值真正地使用了w3c的默认值“visible”。
如果你现有的布局是依赖于ie的“自动撑开”,那么要小心,很可能会出现问题(特别是动态内容的网页)。
xml序言(prolog)可能会影响盒模型
oh,my god!又是盒模型!
大家知道ie有两种渲染模式:quirks mode和strict mode。quirks mode基本上是非标准的,包括盒模型在内,它的渲染方式与w3c的标准有些出入。而strick mode基本上是标准的(反正都不是绝对标准也不是绝对不标准……)。ie6及以前版本会根据写在xhtml文档第一行(也只能是第一行)的doctype声明来选择渲染模式。如果发现了一个它能识别的doctype,比如xhtml transitional或者xhtml strict等等,它就使用strict mode来渲染。其他所有情况下都使用quirks mode。
有些开发者为了显式地声明他们的xhtml文档是一个xml,会在文档的第一行(问题就在这里,它也必须在第一行)加上xml的序言(prolog)。比如:
<?xml version="1.0" encoding="gb2312"?>
虽然初衷是为了让文档更“标准”,但由于ie不认这行字,结果还是按quirks mode来渲染。
ie7 beta2解决这个问题,它会跳过prolog来看检查doctype。所以可能会出现ie6及以下版本用quirks mode渲染而ie7 beta2用strict mode渲染的情况。
其实这个问题容易解决,在现有的环境下,把prolog直接删掉就行了,实在是没什么大的用处。当然想装作在使用xhtml,事实上还是想用quirks mode的人可能得好好想个新办法了^_^
由于改进bug而失效的hack技巧
* html
这是一个利用ie bug的hack,如下的写法只有ie会解析其中的内容:
* html{...}
* html body{...}
现在ie beta2将和大部队一起把它们忽略掉。
下划线hack
这也是一个利用ie bug的hack,如下的写法只有ie会解析其中的内容:
.myclass{
min-height:300px;
_height:300px;
}
现在ie beta2将不再解析下划线开头的属性,但是会把它当作一个“用户自定义”属性。自定义属性并不能应用到表现上,但是它会存在于文档模型中,可以使用脚本来访问。(这个特性我还没有测试过)
/**/注释hack
这是我最喜欢的hack技巧之一了。如下的写法在strict mode下面会对ie6透明(ie5.x是会解析的),但是现在ie7 beta2将会解析它:
.myclass{
height/**/:300px;
}
由于增强功能而失效的hack技巧
原来ie不支持以下写法,现在可以了:
child选择符hack
html > body{
height:300px;
}
相邻选择符hack
head + body{
height:300px;
}
相邻选择符和first-child伪类选择符
head:first-child + body{
height:300px;
}
这些都算不上什么坏消息,反正我从来不用这些hack^_^
俺的页面乱咧,咋办?
在msdn的那篇文章上给出了一些解决方案,从我的角度来看都是些治标不治本、隔靴搔痒的方案。要不用js来做css的工作,要不只针对ie来载入特定的css。所以建议大家:等!一等ie7的正式版,在正式版出来之前,什么都有可能变。二等伟大的css社区的牛牛们找出更多的hack技巧。ie7不可能做得和ff一模一样,也不可能和ie6一模一样,反正总会有点不一样的,就利用那点不一样的东西来做hack。
虽然用各种hack是件很无奈的事情,但现实就是这样,我们在努力影响这个行业的同时只有好好适应它,所以私底下很希望能看到用中国人名字命名的hack出现。
fight!
推荐阅读
-
IE7 beta2的CSS兼容性
-
一个针对IE7的CSS Hack
-
兼容IE6/IE7/IE8/FireFox的css hack_html/css_WEB-ITnose
-
问一个简单的css滚动条宽度兼容IE7和IE6的问题._html/css_WEB-ITnose
-
ie6/ie7 css兼容性问题_html/css_WEB-ITnose
-
在IE7及一下字是横的显示的,怎么解决_html/css_WEB-ITnose
-
ie6/ie7 css兼容性问题_html/css_WEB-ITnose
-
有关于拖拽插件dragsort的兼容性问题_html/css_WEB-ITnose
-
经常遇到的浏览器兼容性问题_html/css_WEB-ITnose
-
当把宽度设为25%时,其他浏览器正常,IE7图片会掉下来,有没有好的解决方法_html/css_WEB-ITnose