一、 不同浏览器下有不同的选择

这些选择器在你需要针对某款浏览器进行css设计时将非常有用.
IE6及其更低版本：* html {}
IE7及其更低版本：*:first-child+html {} * html {}
仅针对IE7：*:first-child+html {}
IE7和当代浏览器：html>body{}
仅当代浏览器(IE7不适用)：html>/**/body{}
Opera9及其更低版本：html:first-child {}
Safari：html[xmlns*=””] body:last-child {}

要使用这些选择器,请将它们放在样式之前. 例如:
#content-box {
width: 300px;
height: 150px;
}

* html #content-box {
width: 250px;
}
您也可以参考更多：Css在不同浏览器下的选择器介绍

二、让IE6支持PNG透明

一个IE6的Bug引起了大麻烦, 他不支持透明的PNG图片。
你需要使用一个css滤镜,例如:

*html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”fil
ename.png”, sizingMethod=”scale”);
}

三、给行内元素定义宽度

如果你给一个行内元素定义宽度,那么它只是在IE6下有效. 所有的HTML元素要么是行内元素要么就好是块元素. 行内元素包括: <span>, <a>, <strong> 和 <em>. 块元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定义行内元素的宽度, 为了解决这个问题你可以将行内元素转变为块元素。例如:
span { width: 150px; display: block }

四、让固定宽度的页面居中

为了让页面在浏览器居中显示, 需要相对定位外层div, 然后把margin设置为auto。例如：
#wrapper {
margin: auto;
position: relative;
}

五、IE6双倍边距的bug

给此对象加上display:inline即可解决问题。例如：
#content {
margin-left:20px;
display:inline;
}

六、两个层之间的3px间隙

传说中的“IE 3px bug”，解决的办法：
1:给右边的层，应用float:left;浮动;
2:给左边的层，应用margin-right:-3px;。

七、在IE中的HTML注释引起文字奇怪的复制

Duplicate Characters Bug很神奇，具体的解决办法：
1、不放置注释。最简单、最快捷的解决方法
2、注释不要放置于2个浮动的区块之间。
3、将文字区块包含在新的<div></div>之间，如：<div style=”float:right;width:400px”><div>↓这就是那个不应该出现那条的蛇</div></div>。
4、去除文字区块的固定宽度，与3有相似之处。
5、有的人在蛇后加一个<br />或者空格，但只是消除现象。
6、不要给浮动元素设置多宽度，使其不会到达包含元素的底部，或者对最后一个元素设置margin-right: -3px;或者更小。
7、注释可以这样写：<!–[if !IE]>Put your commentary in here…<![endif]–>

八、图片替换技术

用文字总比用图片做标题好一些，文字对屏幕阅读机和SEO都是非常友好的。
HTML:
<h1><span>Main heading one</span></h1>
CSS:
h1 { background: url(heading-image.gif) no-repeat; }
h1 span {
position:absolute;
text-indent: -5000px;
}
你可以看到我们对标题使用了标准的<h1>作为标签并且用css来将文本替换为图片，text-indent属性将文字推到了浏览器左边5000px处, 这样对于浏览者来说就看不见了.
关掉css,然后看看头部会是什么样子的。

九、 最小宽度

IE6另外一个bug就是它不支持 min-width 属性. min-width又是相当有用的, 特别是对于弹性模板来说, 它们有一个100%的宽度,min-width 可以告诉浏览器何时就不要再压缩宽度了.
除IE6以外所有的浏览器你只需要一个 min-width: Xpx; 例如:
.container {
min-width:300px;
}
为了让他在IE6下工作, 我们需要一些额外的工作. 开始的时候我们需要创建两个div, 一个包含另一个:

<div>
<div>Content</div>
</div>
然后你需要定义外层div的min-width属性

.container {
min-width:300px;
}
这时该是IE hack大显身手的时候了. 你需要包含如下的代码:

* html .container {
border-right: 300px solid #FFF;
}
* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}
十、隐藏水平滚动条

为了避免出现水平滚动条, 在body里加入 overflow-x:hidden。
body { overflow-x: hidden; }

DIV为空时占据空间的解决办法
当在div标签内无任何内容时：<div></div> 如果给div元素<b>设置了宽度<b>时，比如width:100%，此时div在IE中（IE6，IE7）将占据物理空间，而在FF中不占据物理空间（正确理解）。为了表述直观，将样式直接写在元素标签内：
<div style=”width:100%”></div>
此时在IE中到底是什么在影响着最终的显示，又是如何解析的呢？
可能的影响因素：字体大小（font-size），字体行高（line-height），高度（height），溢出（overflow）

我们对上面的代码逐一添加过滤属性
在测试的过程中，你会发现IE6和IE7的解析也不尽相同，比如在给div设置了line-height:0; height:0; 的样式后，IE7中显示正常了，不再占据物理空间了，而IE6却依然我行我素，亦或是悲！

最终的测试结果，最简单的方法是，给div设置高度（height）和溢出（overflow）属性：
<div style=”width:100%;height:0;overflow:hidden; “></div>