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

教程Tag：暫無Tag,歡迎添加,賺取U幣!

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

.box1 {width:250px;}

!important是說這個設置有優先級，IE碰到!important不會出錯只是忽略他的功能，假如后面又設置了width，IE會以最后設置的 width為準，假如后面再沒有其它設置，則會用當前這個值，也就是前面的!important那個值。比如：#test {width: 300px !important }IE與FF都顯示300PX。假如后面還有值IE就顯示后面的值，FF顯示前面有!import的那個值！

而其它瀏覽器，則認這個important，因為有優先級的關系，所以始終以前面設置的 width為準。

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

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

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

這句顯示結果FF：300px IE: 400px

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

但是問題又來了，IE7已可以識別!important，請看下面！

二、針對firefox ie6 ie7的css樣式

現在大部分都是用!important來hack，對于ie6和firefox測試可以正常顯示，但是ie7對!important可以正確解釋，會導致頁面沒按要求顯示！找到一個針對IE7不錯的hack方式就是使用“* html”，現在用IE7瀏覽一下，應該沒有問題了。

現在寫一個CSS可以這樣：

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

那么在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999可以用” ”來實現只有IE識別的CSS Hack可能有朋友想到用”_” Hack，但它們是由區別的，因為IE7中是不識別“_”的。所以用

測試結果：

IE5.5，IE6 ，IE7瀏覽器都能識別；

FF2.0，Opera 9，Safari 2瀏覽器不識別。

三、IE7的hack

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

>body
html*
* html

這三種寫法，其中前兩種都是不合法的 CSS 寫法，在標準兼容瀏覽器中被被忽略，但是 IE7 卻不這么認為。對于 >body ，它會將缺失的選擇符用全局選擇符 * 代替，也就是將其處理成了 *>body，而且不光對于 > 選擇符， ,~ 選擇符中這個現象也存在。對于 html* ，由于 html 和 * 之間沒有空格，所以也是一種 CSS 語法錯誤，但 IE7 不會忽略，而是錯誤地認為這里有一個空格。對于第三種 * html，IE7 認為 html 前面的 DTD 聲明也是一個元素，所以 html 會被選中，這三種方法中只有這一種方法是合法的 CSS 寫法，也就是說可以通過校驗器的驗證，因此也是作者推薦的 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對盒模型的解釋也不一樣，代碼說明：#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內。

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

五、ul 標簽在 Mozilla 中有 padding 值的，而在 IE 中只有 margin 有值。

設置ul{margin:0;padding:0}

六、IE 分不清繼續關系和父子關系的差別，全部都是繼續關系

七、FF下給 div 設置 padding 后會導致 width 和 height 增加, 但IE不會.(可用!important解決)

八、居中問題

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

2、水平居中. margin: 0 auto;(當然不是萬能)

3、若需給 a 標簽內內容加上樣式, 需要設置 display: block;(常見于導航標簽)

4、FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.\\

5、UL的不同表現：

ul 標簽在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導航標簽和內容列表)

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