浏览器兼容性

IE和FF对盒模型的解释

一个测试网站

http://browsershots.org/ 

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：

background:#000 !important; background:#333;

区别IE7与FF：

background:#000 ; *background:#333;

区别FF，IE7，IE6：

background:#000 ; *background:#333 !important; *background:#666;

区分IE6，IE7，firefox
background:#000 ; *background::#333 ; _background:#666; 

书写的顺序:firefox IE7 IE6
---------------------------------------------------------------------------------------------
IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;
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.