ifireyy

Internet Explorer 7中的层叠样式表兼容性不知道怎么的就在MSDN上看见了这篇文章，都2007年了，我还是每天在网上闲逛。

在IE 7下，我的页面乱了、内容溢出了，文字重叠了...这些可能是用了IE 7以后，比较多出现的页面问题吧。不知道我的页面在IE 7下是怎么样的，应该不会有溢出的问题把。（希望）顺便推荐一个网站，可以给你返回各种浏览器浏览你网站的效果图片。（Test your web design in different browsers）

继续话题，文章上提到了几点引起这些浏览的问题关键：

1. 处理overflow:visible的默认行为

   设置了默认的高度和宽度，在IE 6的年代，内容如果超出范围，高度将会自适应的变化（好似很智能），但是在IE 7下就会有溢出了，如果你必须要制定一个最小的高度或者宽度的话，推荐使用min-height和min-width

2. 由于CSS hacks的改进而导致的错误页面(IE 7对于CSS支持的改进)

   一些老的CSS hacks写法，比如用html > body，head + body，head:first-child + body等来区别IE和其他现代浏览器，因为IE 7已经支持以上CSS声明，所以也失效了，必须注意。

关于CSS hacks，可以看看以前的这两篇文章：

• CSS hacks
• IE条件注释方式

一些css hacks，主要是跨浏览器的兼容。（IE 7 和 Opera至今还没用过，购入新机器的计划又推后了...）有时候我们想针对同一个元素在不同的浏览器使用不同的样式定义，通常都是用来解决一些浏览器存在的bug.

• IE 6 及旧版本 * html {}
• IE 7 用 *:first-child+html {}
• IE 7 和 modern browsers html>body {}
• modern browsers (不包括 IE 7) html>/**/body {}
• Opera 9 及旧版本 html:first-child {}

比如现在有一个ID为wrapper的元素，我们想在IE 6以及以前的IE版本中下显示1px的红色边框，在IE 7里显示1px的蓝色边框，在modern browsers下显示2px的绿色边框。

#wrapper {background-color:#eee;width:990px;}
* html {border:1px solid red;} //IE 6以及以前的IE版本
*:first-child+html {border:1px solid blue;} //IE 7
html>/**/body {border:2px solid green;} //标准浏览器

还有一种IE注释方式，可以看这里IE条件注释方式