IE與FF瀏覽器CSS兼容技巧_瀏覽器兼容教程

一、《important 在IE6及FF中的使用》
.box1 {width:150px !important;}

 

 

.box1 {width:250px;}

!important是說(shuō)這個(gè)設(shè)置有優(yōu)先級(jí)，IE碰到!important不會(huì)出錯(cuò)只是忽略他的功能，假如后面又設(shè)置了width，IE會(huì)以最后設(shè)置的 width為準(zhǔn)，假如后面再?zèng)]有其它設(shè)置，則會(huì)用當(dāng)前這個(gè)值，也就是前面的!important那個(gè)值。比如：#test {width: 300px !important }IE與FF都顯示300PX。假如后面還有值IE就顯示后面的值，F(xiàn)F顯示前面有!import的那個(gè)值！

 

 

而其它瀏覽器，則認(rèn)這個(gè)important，因?yàn)橛袃?yōu)先級(jí)的關(guān)系，所以始終以前面設(shè)置的 width為準(zhǔn)。

 

 

#test {width:300px;width:400px !important ;}

這句顯示的結(jié)果是IE和FF寬度都是 400PX

#test {width:300px !important ;width:400px;}

這句顯示結(jié)果FF：300px IE: 400px

所以，使用!important 時(shí)，把含有!important 放到前面。

但是問(wèn)題又來(lái)了，IE7已可以識(shí)別!important，請(qǐng)看下面！

 

 

二、針對(duì)firefox ie6 ie7的css樣式

現(xiàn)在大部分都是用!important來(lái)hack，對(duì)于ie6和firefox測(cè)試可以正常顯示，但是ie7對(duì)!important可以正確解釋?zhuān)瑫?huì)導(dǎo)致頁(yè)面沒(méi)按要求顯示！找到一個(gè)針對(duì)IE7不錯(cuò)的hack方式就是使用“* html”，現(xiàn)在用IE7瀏覽一下，應(yīng)該沒(méi)有問(wèn)題了。

 

 

現(xiàn)在寫(xiě)一個(gè)CSS可以這樣：

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
* html #1 { color: #999; } /* IE7 */

 

 

那么在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999可以用” ”來(lái)實(shí)現(xiàn)只有IE識(shí)別的CSS Hack可能有朋友想到用”_” Hack，但它們是由區(qū)別的，因?yàn)镮E7中是不識(shí)別“_”的。所以用

測(cè)試結(jié)果：

 

 

IE5.5，IE6 ，IE7瀏覽器都能識(shí)別；

FF2.0，Opera 9，Safari 2瀏覽器不識(shí)別。

三、IE7的hack

IE7 修復(fù)了很多 bug，也增加了對(duì)一些選擇符的支持，所以現(xiàn)在諸如 *html {} 和 html>body {} 、!important等針對(duì) IE 隱藏或顯示的 hack 都會(huì)在 IE7 中失效。雖然 CSS Hack 不推薦使用，條件注釋才是萬(wàn)無(wú)一失的過(guò)濾器，但是條件注釋只能出現(xiàn)在 HTML 中，CSS Hack 還是有用武之地的。Nanobot 發(fā)現(xiàn)了一些針對(duì) IE7 的 CSS Hack，具體就是：

>body
html*
* html

這三種寫(xiě)法，其中前兩種都是不合法的 CSS 寫(xiě)法，在標(biāo)準(zhǔn)兼容瀏覽器中被被忽略，但是 IE7 卻不這么認(rèn)為。對(duì)于 >body ，它會(huì)將缺失的選擇符用全局選擇符 * 代替，也就是將其處理成了 *>body，而且不光對(duì)于 > 選擇符， ,~ 選擇符中這個(gè)現(xiàn)象也存在。對(duì)于 html* ，由于 html 和 * 之間沒(méi)有空格，所以也是一種 CSS 語(yǔ)法錯(cuò)誤，但 IE7 不會(huì)忽略，而是錯(cuò)誤地認(rèn)為這里有一個(gè)空格。對(duì)于第三種 * html，IE7 認(rèn)為 html 前面的 DTD 聲明也是一個(gè)元素，所以 html 會(huì)被選中，這三種方法中只有這一種方法是合法的 CSS 寫(xiě)法，也就是說(shuō)可以通過(guò)校驗(yàn)器的驗(yàn)證，因此也是作者推薦的 hack 用法。

 

 

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.

四、IE和FF對(duì)盒模型的解釋也不一樣，代碼說(shuō)明：#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內(nèi)。

 

 

假如有BOX{WIDTH:"300"; PADDING:"5PX";}，則BOX在IE的寬度應(yīng)該為：310。而在FF的寬度則是300，所以在BOX有填充的情況下應(yīng)該這樣使用BOX{WIDTH:"290"!IMPORTANT; WIDTH: "300";}，這樣子才能確保BOX的寬度始終在300px,而不會(huì)出現(xiàn)被撐開(kāi)的現(xiàn)象，而在FF里面則不會(huì)造成浮動(dòng)層填不滿(mǎn)的情況。

 

 

五、ul 標(biāo)簽在 Mozilla 中有 padding 值的，而在 IE 中只有 margin 有值。

設(shè)置ul{margin:0;padding:0}

六、IE 分不清繼續(xù)關(guān)系和父子關(guān)系的差別，全部都是繼續(xù)關(guān)系

七、FF下給 div 設(shè)置 padding 后會(huì)導(dǎo)致 width 和 height 增加, 但I(xiàn)E不會(huì).(可用!important解決)

 

 

八、居中問(wèn)題

1、垂直居中.將 line-height 設(shè)置為當(dāng)前div相同的高度, 再通過(guò) vertical-align: middle.( 注重內(nèi)容不要換行.)

2、水平居中. margin: 0 auto;(當(dāng)然不是萬(wàn)能)

 

 

3、若需給 a 標(biāo)簽內(nèi)內(nèi)容加上樣式, 需要設(shè)置 display: block;(常見(jiàn)于導(dǎo)航標(biāo)簽)

4、FF 和 IE 對(duì) BOX 理解的差異導(dǎo)致相差 2px 的還有設(shè)為 float的div在ie下 margin加倍等問(wèn)題.\\

5、UL的不同表現(xiàn)：

 

 

ul 標(biāo)簽在 FF 下面默認(rèn)有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見(jiàn)于導(dǎo)航標(biāo)簽和內(nèi)容列表)

6、作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達(dá)到高度自適應(yīng)。

 

 

九、關(guān)于手形光標(biāo)hand 只適用于 IE..IE與FF都認(rèn)的話(huà)請(qǐng)用 cursor: pointer