Internet Explorer 7中的层叠样式表兼容性不知道怎么的就在MSDN上看见了这篇文章，都2007年了，我还是每天在网上闲逛。
在IE 7下，我的页面乱了、内容溢出了，文字重叠了...这些可能是用了IE 7以后，比较多出现的页面问题吧。不知道我的页面在IE 7下是怎么样的，应该不会有溢出的问题把。（希望）顺便推荐一个网站，可以给你返回各种浏览器浏览你网站的效果图片。（Test your web design in different browsers）
继续话题，文章上提到了几点引起这些浏览的问题关键：
处理overflow:visible的默认行为
设置了默认的高度和宽度，在IE 6的年代，内容如果超出范围，高度将会自适应的变化（好似很智能），但是在IE 7下就会有溢出了，如果你必须要制定一个最小的高度或者宽度的话，推荐使用min-height和min-width由于CSS hacks的改进而导致的错误页面(IE 7对于CSS支持的改进)
一些老的CSS hacks写法，比如用html > body，head + body，head:first-child + body等来区别IE和其他现代浏览器，因为IE 7已经支持以上CSS声明，所以也失效了，必须注意。
关于CSS hacks，可以看看以前的这两篇文章：
一些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条件注释方式
今天遇到一个很诡异的问题，记得以前也遇到过，不过上次碰到的时候，回避了一下，那时候太忙了(^ ^!) 问题是在li标签里加img标签的时候，在img下会出现5px的空隙。结构是这样的：
<ul>
<li><img src="ss.gif" width="100" height="40" alt="ss"></li>
<li><img src="ss.gif" width="100" height="40" alt="ss"></li>
<li><img src="ss.gif" width="100" height="40" alt="ss"></li>
</ul>
结构很简单，不过问题就出来了，效果看这里
在尝试中发现在img标签里加align="center" 或者 加样式 img {vertical-align: top;} 就可以解决了。暴汗...目前还不知道原因
8.28 update: : 在blueidea上发现一个帖子IE图片下空隙问题解决方法集合，不过还是没人说明产生问题的原因...
FROM：Understanding “Any order columns”
我们在这里要解决的是：一个3栏的页面结构，源代码是这样的结构— main, nav, 和 links — 我们要做的是通过css的定义来使它以任意的排列结构显示出来.
我们的代码包含3个 divs, 每个都有相应的 id 和内容.
[...content ...]
[...content...]
[...content...]
首先我们要做的是给它们定义相应的宽度和向左(left)的浮动(float)值, 以及清除一个windows下IE的元素浮动BUG.
#main {
display:inline; /* Fixes IE Double Margin Float Bug */
float:left;
width:50%;
}
#nav {
float:left;
width:20%;
}
#links {
float:left;
width:20%;
}
好的. 这个是现在的3栏结构, 当然如果我们需要改变3栏结构的显示次序，我们可能需要修改网页源代码的结构。
解决办法
首先, 我们尝试互换 main 和 nav 分栏的位置，这样的话 nav 就在左边, main 就在中间了。 很明显的，我们给 main 分栏一个 left-margin of 20% 让它空出一块地方(暂且给它个命名：地盘A)给 nav 分栏，接着通过一个负的left-margin of -70% 把 nav 分栏移动到我们的目的地. 搬家成功.
#main {
display:inline; /* Fixes IE Double Margin Float Bug */
float:left;
width:50%;
margin-left:20%;
}
#nav {
float:left;
width:20%;
margin-left:-70%;
}
#links {
float:left;
width:20%;
}
接着, 我们试一下让 nav 和 links 分栏调换位置. 当然， main 分栏就不需要怎么动了，保持它的 left-margin of 20%. 我们去除 nav 分栏的负 left-margin ，同时用一个负的 left-margin of -90% 把 links 分栏移动到(地盘A).
#main {
display:inline; /* Fixes IE Double Margin Float Bug */
float:left;
width:50%;
margin-left:20%;
}
#nav {
float:left;
width:20%;
}
#links {
float:left;
width:20%;
margin-left:-90%;
}
并不华丽的演示。你可以动手尝试一下，真的非常简单。
其他相关页面
