div+css?兼容ie6?ie7?ie8?ie9和firefox?chrome等瀏覽器方法
1.DOCTYPE?影響?CSS?處理
2.FF:?div?設(shè)置?margin-left,?margin-right?為?auto?時已經(jīng)居中,?IE?不行
立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記(深入)”;
3.FF:?body?設(shè)置?text-align?時,?div?需要設(shè)置?margin:?auto(主要是?margin-left,margin-right)?方可居中
4.FF:?設(shè)置?padding?后,?div?會增加?height?和?width,?但?IE?不會,?故需要用?!important?多設(shè)一個?height?和?width
5.FF:?支持?!important,?IE?則忽略,?可用?!important?為?FF?特別設(shè)置樣式
6.div?的垂直居中問題:?vertical-align:middle;?將行距增加到和整個DIV一樣高?line-height:200px;?然后插入文字,就垂直居中了。缺點是要控制內(nèi)容不要換行
7.cursor:?pointer?可以同時在?IE?FF?中顯示游標(biāo)手指狀,?hand?僅?IE?可以
8.FF:?鏈接加邊框和背景色,需設(shè)置?display:?block,?同時設(shè)置?float:?left?保證不換行。參照?menubar,?給?a?和?menubar?設(shè)置高度是為了避免底邊顯示錯位,?若不設(shè)?height,?可以在?menubar?中插入一個空格。
9.在mozilla?firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法:?div{margin:30px!important;margin:28px;}注意這兩個margin的順序一定不能寫反,據(jù)阿捷的說法!?important這個屬性IE不能識別,但別的瀏覽器可以識別。所以在IE下其實解釋成這樣:?div{maring:30px;margin:28px}重復(fù)定義的話按照最后一個來執(zhí)行,所以不可以只寫margin:XXpx!?important;
11.ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的,而在IE中只有margin有值所以先定義?ul{margin:0;padding:0;}就能解決大部分問題
注意事項:
1、float的div一定要閉合。
例如:(其中floatA、floatB的屬性已經(jīng)設(shè)置為float:left;)?
這里的NOTfloatC并不希望繼續(xù)平移,而是希望往下排。
這段代碼在IE中毫無問題,問題出在FF。原因是NOTfloatC并非float標(biāo)簽,必須將float標(biāo)簽閉合。
在
之間加上
這個div一定要注意聲明位置,一定要放在最恰當(dāng)?shù)牡胤剑冶仨毰c兩個具有float屬性的div同級,之間不能存在嵌套關(guān)系,否則會產(chǎn)生異常。
并且將clear這種樣式定義為為如下即可:
.clear{
clear:both;
}
此外,為了讓高度能自動適應(yīng),要在wrapper里面加上overflow:hidden;
當(dāng)包含float的box的時候,高度自動適應(yīng)在IE下無效,這時候應(yīng)該觸發(fā)IE的layout私有屬性(萬惡的IE)用zoom:1;可以做到,這樣就達(dá)到了兼容。
例如某一個wrapper如下定義:
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px?auto;}
2、margin加倍的問題
設(shè)置為float的div在ie下設(shè)置的margin會加倍。這是一個ie6都存在的bug。
解決方案是在這個div里面加上display:inline;
例如:
相應(yīng)的css為
#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/}
3、關(guān)于容器的包涵關(guān)系
很多時候,尤其是容器內(nèi)有平行布局,例如兩、三個float的div時,寬度很容易出現(xiàn)問題。在IE中,外層的寬度會被內(nèi)層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。
4、關(guān)于高度的問題
如果是動態(tài)地添加內(nèi)容,高度最好不要定義。瀏覽器可以自動伸縮,然而如果是靜態(tài)的內(nèi)容,高度最好定好。(似乎有時候不會自動往下?lián)伍_,不知道具體怎么回事)
5、最狠的手段?-?!important;
如果實在沒有辦法解決一些細(xì)節(jié)問題,可以用這個方法.FF對于”!important”會自動優(yōu)先解析,然而IE則會忽略.如下?
.tabd1{
background:url(/res/images/up/tab1.gif)?no-repeat?0px?0px?!important;?/*Style?for?FF*/
background:url(/res/images/up/tab1.gif)?no-repeat?1px?0px;?/*?Style?for?IE?*/}
值得注意的是,一定要將xxxx?!important?這句放置在另一句之上,上面已經(jīng)提過
IE7.0對CSS的支持又有新問題。瀏覽器多了,網(wǎng)頁兼容性更差了,疲于奔命的還是我們?,為解決IE7.0的兼容問題,找來了下面這篇文章:
現(xiàn)在我大部分都是用!important來hack,對于ie6和firefox測試可以正常顯示,但是ie7對!important可以正確解釋,會導(dǎo)致頁面沒按要求顯示!搜索了一下,找到一個針對IE7不錯的hack方式就是使用“*+html”,現(xiàn)在用IE7瀏覽一下,應(yīng)該沒有問題了。
現(xiàn)在寫一個CSS可以這樣:
#example?{?color:?#333;?}?/*?Moz?*/
*?html?#example?{?color:?#666;?}?/*?IE6?*/
*+html?#example?{?color:?#999;?}?/*?IE7?*/
那么在firefox下字體顏色顯示為#333,IE6下字體顏色顯示為#666,IE7下字體顏色顯示為#999.
關(guān)于CSS對各個瀏覽器兼容已經(jīng)是老生常談的問題了,?網(wǎng)絡(luò)上的教程遍地都是.以下內(nèi)容沒有太多新穎,?純屬個人總結(jié),?希望能對初學(xué)者有一定的幫助.
一、CSS?HACK以下兩種方法幾乎能解決現(xiàn)今所有HACK.
1,?!important
隨著IE7對!important的支持,?!important?方法現(xiàn)在只針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)
#wrapper
{
width:?100px!important;?/*?IE7+FF?*/
width:?80px;?/*?IE6?*/
}
2,?IE6/IE77對FireFox
*+html?與?*html?是IE特有的標(biāo)簽,?firefox?暫不支持.而*+html?又為?IE7特有標(biāo)簽.
#wrapper
{
#wrapper?{?width:?120px;?}?/*?FireFox?*/
*html?#wrapper?{?width:?80px;}?/*?ie6?fixed?*/
*+html?#wrapper?{?width:?60px;}?/*?ie7?fixed,?注意順序?*/
}
注意:
*+html?對IE7的HACK?必須保證HTML頂部有如下聲明:
nbsp;HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
二、萬能?float?閉合
關(guān)于?clear?float?的原理可參見?[How?To?Clear?Floats?Without?Structural?Markup]
將以下代碼加入Global?CSS?中,給需要閉合的div加上?class="clearfix"?即可,屢試不爽.
/*?Clear?Fix?*/
.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/*?Hide?from?IE?Mac?*/
.clearfix?{display:block;}
/*?End?hide?from?IE?Mac?*/
/*?end?of?clearfix?*/
三、其他兼容技巧
1,?FF下給?div?設(shè)置?padding?后會導(dǎo)致?width?和?height?增加,?但I(xiàn)E不會.(可用!important解決)
2,?居中問題.
1).垂直居中.將?line-height?設(shè)置為?當(dāng)前?div?相同的高度,?再通過?vertical-align:?middle.(?注意內(nèi)容不要換行.)
2).水平居中.?margin:?0?auto;(當(dāng)然不是萬能)
3,?若需給?a?標(biāo)簽內(nèi)內(nèi)容加上?樣式,?需要設(shè)置?display:?block;(常見于導(dǎo)航標(biāo)簽)
4,?FF?和?IE?對?BOX?理解的差異導(dǎo)致相差?2px?的還有設(shè)為?float的div在ie下?margin加倍等問題.
5,?ul?標(biāo)簽在?FF?下面默認(rèn)有?list-style?和?padding?.?最好事先聲明,?以避免不必要的麻煩.?(常見于導(dǎo)航標(biāo)簽和內(nèi)容列表)
6,?作為外部?wrapper?的?div?不要定死高度,?最好還加上?overflow:?hidden.以達(dá)到高度自適應(yīng).
7,?關(guān)于手形光標(biāo).?cursor:?pointer.?而hand?只適用于?IE.
1?針對firefox?ie6?ie7的css樣式?
現(xiàn)在大部分都是用!important來hack,對于ie6和firefox測試可以正常顯示,
但是ie7對!important可以正確解釋,會導(dǎo)致頁面沒按要求顯示!找到一個針
對IE7不錯的hack方式就是使用“*+html”,現(xiàn)在用IE7瀏覽一下,應(yīng)該沒有問題了。?
現(xiàn)在寫一個CSS可以這樣:?
#1?{?color:?#333;?}?/*?Moz?*/?
*?html?#1?{?color:?#666;?}?/*?IE6?*/?
*+html?#1?{?color:?#999;?}?/*?IE7?*/
那么在firefox下字體顏色顯示為#333,IE6下字體顏色顯示為#666,IE7下字體顏色顯示為#999。
2?css布局中的居中問題?
主要的樣式定義如下:
body?{TEXT-ALIGN:?center;}
#center?{?MARGIN-RIGHT:?auto;?MARGIN-LEFT:?auto;?}
說明:
首先在父級元素定義TEXT-ALIGN:?center;這個的意思就是在父級元素內(nèi)的內(nèi)容居中;對于IE這樣設(shè)定就已經(jīng)可以了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設(shè)定時再加上“MARGIN-RIGHT:?auto;MARGIN-LEFT:?auto;?”需要說明的是,如果你想用這個方法使整個頁面要居中,建議不要套在一個DIV里,你可以依次拆出多個div,只要在每個拆出的div里定義MARGIN-RIGHT:?auto;MARGIN-LEFT:?auto;?就可以了。
3?盒模型不同解釋
#box{?width:600px;?//for?ie6.0-?w\idth:500px;?//for?ff+ie6.0}
#box{?width:600px!important?//for?ff?width:600px;?//for?ff+ie6.0?width?/**/:500px;?//for?ie6.0-}?
4?浮動ie產(chǎn)生的雙倍距離
#box{?float:left;?width:100px;?margin:0?0?0?100px;?//這種情況之下IE會產(chǎn)生200px的距離?
display:inline;?//使浮動忽略}這里細(xì)說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,...不可控制(內(nèi)嵌元素);
#box{?display:block;?//可以為內(nèi)嵌元素模擬為塊元素?display:inline;?//實現(xiàn)同一行排列的的效果?
diplay:table;
IE不認(rèn)得min-這個定義,但實際上它把正常的width和height當(dāng)作有min的情況來使。這樣問題就大了,如果只用寬度和高度,
正常的瀏覽器里這兩個值就不會變,如果只用min-width和min-height的話,IE下面根本等于沒有設(shè)置寬度和高度。
比如要設(shè)置背景圖片,這個寬度是比較重要的。要解決這個問題,可以這樣:
#box{?width:?80px;?height:?35px;}html>body?#box{?width:?auto;?height:?auto;?min-width:?80px;?min-height:?35px;}
6?頁面的最小寬度
min-width是個非常方便的CSS命令,它可以指定元素最小也不能小于某個寬度,這樣就能保證排版一直正確。但I(xiàn)E不認(rèn)得這個,
而它實際上把width當(dāng)做最小寬度來使。為了讓這一命令在IE上也能用,可以把一個div放到body?標(biāo)簽下,然后為div指定一個類:
然后CSS這樣設(shè)計:
#container{?min-width:?600px;?width:expression(document.body.clientWidth?
第一個min-width是正常的;但第2行的width使用了Javascript,這只有IE才認(rèn)得,這也會讓你的HTML文檔不太正規(guī)。它實際上通過Javascript的判斷來實現(xiàn)最小寬度。
7?清除浮動
.hackbox{?display:table;?//將對象作為塊元素級的表格顯示}或者.hackbox{?clear:both;}
或者加入:after(偽對象),設(shè)置在對象后發(fā)生的內(nèi)容,通常和content配合使用,IE不支持此偽對象,非Ie?瀏覽器支持,
所?以并不影響到IE/WIN瀏覽器。這種的最麻煩的......#box:after{?content:?".";?display:?block;?height:?0;?clear:?both;?visibility:?hidden;}?
8?DIV浮動IE文本產(chǎn)生3象素的bug
左邊對象浮動,右邊采用外補(bǔ)丁的左邊距來定位,右邊對象內(nèi)的文本會離左邊有3px的間距.
#box{?float:left;?width:800px;}#left{?float:left;?width:50%;}#right{?width:50%;}*html?#left{?margin-right:-3px;?//這句是關(guān)鍵}
HTML代碼
9?屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)
p[id]{}div[id]{}
這個對于IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用
屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標(biāo)簽中有id的都是同樣式的.
10?IE捉迷藏的問題
當(dāng)div應(yīng)用復(fù)雜的時候每個欄中又有一些鏈接,DIV等這個時候容易發(fā)生捉迷藏的問題。
有些內(nèi)容顯示不出來,當(dāng)鼠標(biāo)選擇這個區(qū)域是發(fā)現(xiàn)內(nèi)容確實在頁面。
解決辦法:對#layout使用line-height屬性?或者給#layout使用固定高和寬。頁面結(jié)構(gòu)盡量簡單。
11?高度不適應(yīng)
高度不適應(yīng)是當(dāng)內(nèi)層對象的高度發(fā)生變化時外層高度不能自動進(jìn)行調(diào)節(jié),特別是當(dāng)內(nèi)層對象使用
margin?或paddign?時。
例:
p對象中的內(nèi)容
?CSS:#box?{background-color:#eee;?}?
#box?p?{margin-top:?20px;margin-bottom:?20px;?text-align:center;?}
解決方法:在P對象上下各加2個空的div對象CSS代碼:.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。
/*IE與Firefox的CSS兼容大全*/?
1.DOCTYPE?影響?CSS?處理?
2.FF:?div?設(shè)置?margin-left,?margin-right?為?auto?時已經(jīng)居中,?IE?不行?
3.FF:?body?設(shè)置?text-align?時,?div?需要設(shè)置?margin:?auto(主要是?margin-left,margin-right)?方可居中?
4.FF:?設(shè)置?padding?后,?div?會增加?height?和?width,?但?IE?不會,?故需要用?!important?多設(shè)一個?height?和?width?
5.FF:?支持?!important,?IE?則忽略,?可用?!important?為?FF?特別設(shè)置樣式?
6.div?的垂直居中問題:?vertical-align:middle;?將行距增加到和整個DIV一樣高?line-height:200px;?然后插入文字,就垂直居中了。缺點是要控制內(nèi)容不要換行?
7.cursor:?pointer?可以同時在?IE?FF?中顯示游標(biāo)手指狀,?hand?僅?IE?可以?
8.FF:?鏈接加邊框和背景色,需設(shè)置?display:?block,?同時設(shè)置?float:?left?保證不換行。參照?menubar,?給?a?和?menubar?設(shè)置高度是為了避免底邊顯示錯位,?若不設(shè)?height,?可以在?menubar?中插入一個空格。?
9.在mozilla?firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法:?
div{margin:30px!important;margin:28px;}?
注意這兩個margin的順序一定不能寫反,據(jù)阿捷的說法!important這個屬性IE不能識別,但別的瀏覽器可以識別。所以在IE下其實解釋成這樣:?
div{maring:30px;margin:28px}?
重復(fù)定義的話按照最后一個來執(zhí)行,所以不可以只寫margin:XXpx!important;?
10.IE5?和IE6的BOX解釋不一致?
IE5下?
div{width:300px;margin:0?10px?0?10px;}?
div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px,而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改?
div{width:300px!important;width?/**/:340px;margin:0?10px?0?10px}?
關(guān)于這個/**/是什么我也不太明白,只知道IE5和firefox都支持但I(xiàn)E6不支持,如果有人理解的話,請告訴我一聲,謝了?。海?
11.ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的,而在IE中只有margin有值所以先定義?
ul{margin:0;padding:0;}?
就能解決大部分問題?
注意事項:?
1、float的div一定要閉合。?
例如:(其中floatA、floatB的屬性已經(jīng)設(shè)置為float:left;)
#div>?
#div>?
#div>?
這里的NOTfloatC并不希望繼續(xù)平移,而是希望往下排。?
這段代碼在IE中毫無問題,問題出在FF。原因是NOTfloatC并非float標(biāo)簽,必須將float標(biāo)簽閉合。?
在
#div>?
#div>?
之間加上?
#div>?
這個div一定要注意聲明位置,一定要放在最恰當(dāng)?shù)牡胤剑冶仨毰c兩個具有float屬性的div同級,之間不能存在嵌套關(guān)系,否則會產(chǎn)生異常。?
并且將clear這種樣式定義為為如下即可:?
.clear{?
clear:both;}?
此外,為了讓高度能自動適應(yīng),要在wrapper里面加上overflow:hidden;?
當(dāng)包含float的box的時候,高度自動適應(yīng)在IE下無效,這時候應(yīng)該觸發(fā)IE的layout私有屬性(萬惡的IE??!)用zoom:1;可以做到,這樣就達(dá)到了兼容。?
例如某一個wrapper如下定義:?
.colwrapper{?
overflow:hidden;?
zoom:1;?
margin:5px?auto;}?
2、margin加倍的問題。?
設(shè)置為float的div在ie下設(shè)置的margin會加倍。這是一個ie6都存在的bug。?
解決方案是在這個div里面加上display:inline;?
例如:?
#div>?
相應(yīng)的css為?
#IamFloat{?
float:left;?
margin:5px;/*IE下理解為10px*/?
display:inline;/*IE下再理解為5px*/}?
3、關(guān)于容器的包涵關(guān)系?
很多時候,尤其是容器內(nèi)有平行布局,例如兩、三個float的div時,寬度很容易出現(xiàn)問題。在IE中,外層的寬度會被內(nèi)層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。?
4、關(guān)于高度的問題?
如果是動態(tài)地添加內(nèi)容,高度最好不要定義。瀏覽器可以自動伸縮,然而如果是靜態(tài)的內(nèi)容,高度最好定好。(似乎有時候不會自動往下?lián)伍_,不知道具體怎么回事)?
5、最狠的手段?-?!important;?
如果實在沒有辦法解決一些細(xì)節(jié)問題,可以用這個方法.FF對于"!important"會自動優(yōu)先解析,然而IE則會忽略.如下?
.tabd1{?
background:url(/res/images/up/tab1.gif)?no-repeat?0px?0px?!important;?/*Style?for?FF*/?
background:url(/res/images/up/tab1.gif)?no-repeat?1px?0px;?/*?Style?for?IE?*/}
div+css兼容(二)
2008年04月02日?星期三?上午?10:58?
DIV+CSS兼容?IE6?IE7?火狐
在區(qū)別火狐和IE時最常用的是!important方法,對于其他不同瀏覽器和瀏覽器的不同版本的的兼容性問題還有下面一些方法,比如:@import,注釋,屬性選擇符,子對象選擇符和voice-family等方法,這些方法在《css網(wǎng)站布局實錄》中有講述.
下面是IE和火狐的css兼容性問題
1.DOCTYPE?影響?CSS?處理
2.FF:?div?設(shè)置?margin-left,?margin-right?為?auto?時已經(jīng)居中,?IE?不行
立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記(深入)”;
3.FF:?body?設(shè)置?text-align?時,?div?需要設(shè)置?margin:?auto(主要是?margin-left,margin-right)?方可居中
4.FF:?設(shè)置?padding?后,?div?會增加?height?和?width,?但?IE?不會,?故需要用?!important?多設(shè)一個?height?和?width
5.FF:?支持?!important,?IE?則忽略,?可用?!important?為?FF?特別設(shè)置樣式
本文由?站酷網(wǎng)?-?pwdesign?原創(chuàng),轉(zhuǎn)載請保留此信息,多謝合作。
HTML怎么學(xué)習(xí)?HTML怎么入門?HTML在哪學(xué)?HTML怎么學(xué)才快?不用擔(dān)心,這里為大家提供了HTML速學(xué)教程(入門課程),有需要的小伙伴保存下載就能學(xué)習(xí)啦!
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://www.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號