IE和FF对盒模型的解释
一个测试网站
IE和FF对盒模型的解释也不一样，代码说明：#test { width: 650px !important;width: 648px;padding-left:2px;background:#fff; }
test 显示的宽带是 650px
IE Box的总宽度是： width+padding+border+margin宽度总和
FF Box的总宽度就是 width的宽度，padding+border+margin的宽度在含在width内。
如果有BOX{WIDTH:"300"; PADDING:"5PX";}
则BOX在IE的宽度应该为:310
而在FF的宽度则是300
所以在BOX有填充的情况下应该这样使用
BOX{WIDTH:"290"!IMPORTANT; WIDTH: "300";}
这样子才能确保BOX的宽度始终在300px,而不会出现被撑开的现象
而在FF里面则不会造成浮动层填不满的情况
ul 标签在 Mozilla 中有 padding 值的，而在 IE 中只有 margin 有值。
设置ul{margin:0;padding:0}
cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
IE对于空格的处理，firefox是忽略的而IE对于块与块之间的空格是处理的
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
Css hacks:区分Ie6、Ie7、firefox
区别IE6与FF：
background:#000; *background:#333;
区分IE6，IE7，firefox
background:#000 ; *background::#333 ; _background:#666;
书写的顺序:firefox IE7 IE6
---------------------------------------------------------------------------------------------
IE都能识别*;标准浏览器(如FF)不能识别*；
IE6支持下划线，IE7和firefox均不支持下划线
---------------------------------------------------------------------------------------------
| IE6 | IE7 | FF | |
| * | √ | √ | × |
| !important | × | √ | √ |
.class
{
background-color:#333333 //所有
*background-color:#444444 //IE7
_background-color:#555555//ie6
}
注意书写的顺序
现在写一个CSS可以这样：
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
IE 6 and below
Use * html {} to select the html element.
IE 7 and below
Use *+html, * html {} to select the html element.
IE 7 only
Use *+html {} to select the html element.
IE 7 and modern browsers only
Use html>body {} to select the body element.
Modern browsers only (not IE 7)
Use html>/**/body {} to select the body element.