IE6/IE7/IE8/Firefox的CSS各種兼容margin問(wèn)題解決辦法
發(fā)布時(shí)間:2010-07-04 17:00:51 作者:佚名
我要評(píng)論

IE6/IE7/IE8/Firefox的CSS各種兼容margin問(wèn)題解決辦法,需要的朋友可以參考下。確實(shí)不錯(cuò)。
外置
.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 視覺(jué)效果不統(tǒng)一,就要在后面跟IE6/IE7的定義
第3行給IE7看
第4行給IE6以及更老的版本看
內(nèi)置
.main{ float:left;#float:none;_float:none;[float:none;]float:none; }
第1個(gè)float給Firefox以及其他瀏覽器看
第2個(gè)加#的float給IE7看
第3個(gè)加_的float給IE6以及更老的版本看
第4個(gè)加[的float給safari看
第5個(gè)加]的float給IE看
各種常見(jiàn)瀏覽器使用的內(nèi)核 (Rendering Engine)
Mozilla Firefox ( Gecko )
Internet Explorer ( Trident )
Opera ( Presto )
Konqueror ( KHTML )
Safari Swift ( WebKit )
用css自動(dòng)隱藏超出寬度內(nèi)容并省略顯示,瀏覽器兼容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的瀏覽器的私有屬性都會(huì)以-xxx-這樣開(kāi)始,
-o-就是以Presto為引擎的 Opera私有的、
-icab-是iCab私有的,
-khtml-就是以KHTML為引擎的瀏覽器(如Konqueror Safari)、
-moz-就是以mozilla的Gecko為引擎的瀏覽器(如Firefox,mozilla)、
-webkit-就是以Webkit 渲染引擎(是KHTML的衍生產(chǎn)品)的瀏覽器(如Safari、Swift)。
并不是說(shuō)像-moz-text-overflow現(xiàn)在有用,而是一個(gè)幻想的寫(xiě)法,當(dāng)一個(gè)瀏覽器的開(kāi)發(fā)人員決定在瀏覽器支持一種還沒(méi)得到公認(rèn)的屬性時(shí),一般 都會(huì)在屬性的前面加上-xxx-這種,表明這種是屬于該瀏覽器私有的屬性,當(dāng)然,這些屬性多數(shù)來(lái)自CSS3的,使用這樣的寫(xiě)法在瀏覽器升級(jí)后也許才有作 用.
IE、Firefox、Opera和Safari對(duì)CSS樣式important和*的支持
1、IE6、IE7都支持 *,但I(xiàn)E8終于回歸正統(tǒng),放棄了對(duì)*的支持
2、IE7、IE8、Firefox、Opera、Safari都支持 important
顧名,important的優(yōu)先級(jí)要高. 舉例說(shuō)明:
<style type=”text/css”>
body
{
background-color:#FF0000 !important;
*background-color:#00FF00 !important;
*background-color:#0000FF;
background-color:#000000;
}
</style>
IE6選擇最后一個(gè),即:background-color:#000000; (因?yàn)镮E6對(duì)important不支持)
IE7選擇第二個(gè),即:background-color:#00FF00;(因?yàn)镮E7開(kāi)始對(duì)important支持了,同時(shí)還死守著它對(duì) * 感情的最后一版本,但important并未起到優(yōu)先級(jí)的作用)
IE8和Firefox、Opera、Safari選擇第一個(gè),即:background-color:#FF0000 !important;(IE8完全支持于important,同時(shí)丟棄了對(duì)*的感情)
另外再補(bǔ)充一個(gè),下劃線”_“,IE6支持下劃線,IE7、IE8和Firefox、Opera、Safari均不支持下劃線。
.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 視覺(jué)效果不統(tǒng)一,就要在后面跟IE6/IE7的定義
第3行給IE7看
第4行給IE6以及更老的版本看
內(nèi)置
.main{ float:left;#float:none;_float:none;[float:none;]float:none; }
第1個(gè)float給Firefox以及其他瀏覽器看
第2個(gè)加#的float給IE7看
第3個(gè)加_的float給IE6以及更老的版本看
第4個(gè)加[的float給safari看
第5個(gè)加]的float給IE看
各種常見(jiàn)瀏覽器使用的內(nèi)核 (Rendering Engine)
Mozilla Firefox ( Gecko )
Internet Explorer ( Trident )
Opera ( Presto )
Konqueror ( KHTML )
Safari Swift ( WebKit )
用css自動(dòng)隱藏超出寬度內(nèi)容并省略顯示,瀏覽器兼容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的瀏覽器的私有屬性都會(huì)以-xxx-這樣開(kāi)始,
-o-就是以Presto為引擎的 Opera私有的、
-icab-是iCab私有的,
-khtml-就是以KHTML為引擎的瀏覽器(如Konqueror Safari)、
-moz-就是以mozilla的Gecko為引擎的瀏覽器(如Firefox,mozilla)、
-webkit-就是以Webkit 渲染引擎(是KHTML的衍生產(chǎn)品)的瀏覽器(如Safari、Swift)。
并不是說(shuō)像-moz-text-overflow現(xiàn)在有用,而是一個(gè)幻想的寫(xiě)法,當(dāng)一個(gè)瀏覽器的開(kāi)發(fā)人員決定在瀏覽器支持一種還沒(méi)得到公認(rèn)的屬性時(shí),一般 都會(huì)在屬性的前面加上-xxx-這種,表明這種是屬于該瀏覽器私有的屬性,當(dāng)然,這些屬性多數(shù)來(lái)自CSS3的,使用這樣的寫(xiě)法在瀏覽器升級(jí)后也許才有作 用.
IE、Firefox、Opera和Safari對(duì)CSS樣式important和*的支持
1、IE6、IE7都支持 *,但I(xiàn)E8終于回歸正統(tǒng),放棄了對(duì)*的支持
2、IE7、IE8、Firefox、Opera、Safari都支持 important
顧名,important的優(yōu)先級(jí)要高. 舉例說(shuō)明:
<style type=”text/css”>
body
{
background-color:#FF0000 !important;
*background-color:#00FF00 !important;
*background-color:#0000FF;
background-color:#000000;
}
</style>
IE6選擇最后一個(gè),即:background-color:#000000; (因?yàn)镮E6對(duì)important不支持)
IE7選擇第二個(gè),即:background-color:#00FF00;(因?yàn)镮E7開(kāi)始對(duì)important支持了,同時(shí)還死守著它對(duì) * 感情的最后一版本,但important并未起到優(yōu)先級(jí)的作用)
IE8和Firefox、Opera、Safari選擇第一個(gè),即:background-color:#FF0000 !important;(IE8完全支持于important,同時(shí)丟棄了對(duì)*的感情)
另外再補(bǔ)充一個(gè),下劃線”_“,IE6支持下劃線,IE7、IE8和Firefox、Opera、Safari均不支持下劃線。
相關(guān)文章
- 剛剛看了css教程覺(jué)得很形象就貼出來(lái)了。想學(xué)習(xí)的朋友可以參考下。2009-10-15
CSS中的邊界margin的取值為負(fù)值說(shuō)明
CSS中的邊界margin的取值也可以為負(fù)值,有時(shí)候我們不敢相信,這是一個(gè)有趣的話題,負(fù)值邊界會(huì)給我們帶來(lái)更多新奇的創(chuàng)意,讓我們的工作更具刺激和挑戰(zhàn)。2011-03-13- 絕對(duì)定位層下margin:auto會(huì)失效,這時(shí)設(shè)置left:50%,然后margin-left的值為層的寬度的一半,就可在達(dá)到margin:auto的效果2011-01-05
- 在將居中顯示時(shí),使用css:#main {margin:0 auto;width:400px;} 此css在firefox下是好的,但是在ie下不起作用。于是開(kāi)始搜索整理了一下,曬出來(lái)和大2012-12-02
- 本文將詳細(xì)介紹css margin屬性,需要了解其妙用的朋友可以參考下2012-11-21
CSS邊距屬性定義是用margin還是用padding的兩者對(duì)比
用CSS做網(wǎng)頁(yè)時(shí).邊距用哪個(gè)屬于好呢?是margin屬性還是padding屬性呢.2012-06-12CSS學(xué)習(xí)之css代碼的簡(jiǎn)寫(xiě)的十條規(guī)則
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介:縮寫(xiě)可以幫助減少CSS文件的大小,更加容易閱讀。我看了別人寫(xiě)的一些css樣式,發(fā)現(xiàn)自己很多時(shí)候?qū)懙囊膊粔蚝?jiǎn)單和規(guī)范。 使用縮寫(xiě)可2009-04-02通過(guò)css屬性margin:auto讓Div中的Table居中
在div標(biāo)簽中加入text-align:center里面的Table是不會(huì)居中的,在Table中加上 margin:auto就可以實(shí)現(xiàn)居中效果,下面有個(gè)示例,大家可以參考下2014-03-19css的margin縮寫(xiě)方式有效提高書(shū)寫(xiě)效率
margin縮寫(xiě)想必有很多新手朋友們都不知道吧,善于使用縮寫(xiě)的朋友可以有效的提高css樣式的書(shū)寫(xiě)效率,看到這里是不是有點(diǎn)心動(dòng)了,下面的示例將會(huì)讓你有所收獲2013-09-05css中padding和margin的異同點(diǎn)介紹
本文從語(yǔ)法結(jié)構(gòu)、可能取的值、瀏覽器兼容問(wèn)題等方面為大家介紹下padding和margin的異同點(diǎn)另附截圖,有想學(xué)習(xí)的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-28