兼容IE6、IE7、IE8、Firefox的CSS写法

外置

.main{ float:left;#float:none;_float:none;

html*.main{ float:left;#float:none;_float:none; }

*+html .main{ float:left;#float:none;_float:none; }

* html .main{ float:left;#float:none;_float:none; }

第1行给Firefox以及其他浏览器看

第2行给safari/IE6/iE7看，如果safari/IE6/iE7 视觉效果不统一，就要在后面跟IE6/IE7的定义

第3行给IE7看

第4行给IE6以及更老的版本看

内置

.main{ float:left;#float:none;_float:none;[float:none;]float:none; }

第1个float给Firefox以及其他浏览器看

第2个加#的float给IE7看

第3个加_的float给IE6以及更老的版本看

第4个加[的float给safari看

第5个加]的float给IE看

各种常见浏览器使用的内核 (Rendering Engine)

Mozilla Firefox ( Gecko )

Internet Explorer ( Trident )

Opera ( Presto )

Konqueror ( KHTML )

Safari Swift ( WebKit )

用css自动隐藏超出宽度内容并省略显示，浏览器兼容ie、ff

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

-icab-text-overflow: ellipsis;

-khtml-text-overflow: ellipsis;

-moz-text-overflow: ellipsis;

-webkit-text-overflow: ellipsis;

基本非IE的浏览器的私有属性都会以-xxx-这样开始，

-o-就是以Presto为引擎的 Opera私有的、

-icab-是iCab私有的，

-khtml-就是以KHTML为引擎的浏览器（如Konqueror Safari）、

-moz-就是以mozilla的Gecko为引擎的浏览器（如Firefox，mozilla）、

-webkit-就是以Webkit 渲染引擎（是KHTML的衍生产品）的浏览器（如Safari、Swift）。

并不是说像-moz-text-overflow现在有用，而是一个幻想的写法，当一个浏览器的开发人员决定在浏览器支持一种还没得到公认的属性时，一般都会在属性的前面加上-xxx-这种，表明这种是属于该浏览器私有的属性，当然，这些属性多数来自CSS3的，使用这样的写法在浏览器升级后也许才有作用。

IE、Firefox、Opera和Safari对CSS样式important和*的支持

1、IE6、IE7都支持 *，但IE8终于回归正统，放弃了对*的支持

2、IE7、IE8、Firefox、Opera、Safari都支持 important

顾名，important的优先级要高. 举例说明：

<style type=”text/css”>

body

{

background-color:#FF0000 !important;

*background-color:#00FF00 !important;

*background-color:#0000FF;

background-color:#000000;

}

</style>

IE6选择最后一个，即：background-color:#000000; （因为IE6对important不支持）

IE7选择第二个，即：background-color:#00FF00;（因为IE7开始对important支持了，同时还死守着它对 * 感情的最后一版本，但important并未起到优先级的作用）

IE8和Firefox、Opera、Safari选择第一个，即：background-color:#FF0000 !important;（IE8完全支持于important，同时丢弃了对*的感情）

另外再补充一个，下划线”_“,IE6支持下划线，IE7、IE8和Firefox、Opera、Safari均不支持下划线。

兼容IE6、IE7、IE8、Firefox的CSS写法

文章评论