IE6/IE7/IE8/Firefox的CSS各種兼容margin問題解決辦法
2024-07-11 08:46:56
供稿：網友
外置
.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均不支持下劃線。
