IE與FF瀏覽器CSS相容技巧

2021-04-19 23:56:20 字數 2935 閱讀 5770

一、《important 在ie6及ff中的使用》

.box1

.box1 模板無憂--mb5u_com

!important是說這個設定有優先順序,ie碰到!important不會出錯只是忽略他的功能,假如後面又設定了width,ie會以最後設定的 width為準,假如後面再沒有其它設定,則會用當前這個值,也就是前面的!important那個值。比如:#test ie與ff都顯示300px。假如後面還有值ie就顯示後面的值,ff顯示前面有!import的那個值! mb5u____com

而其它瀏覽器,則認這個important,因為有優先順序的關係,所以始終以前面設定的 width為準。

#test

這句顯示的結果是ie和ff寬度都是 400px

#test

這句顯示結果ff:300px ie: 400px

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

但是問題又來了,ie7已可以識別!important,請看下面!

二、針對firefox ie6 ie7的css樣式

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

現在寫乙個css可以這樣:

#1 /* moz */

* html #1 /* ie6 */

* html #1 /* ie7 */ mb5u_com

那麼在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

test 顯示的寬頻是 650px

ie box的總寬度是: width padding border margin寬度總和ff box的總寬度就是 width的寬度, padding border margin的寬度在含在width內。

假如有box,則box在ie的寬度應該為:310。而在ff的寬度則是300,所以在box有填充的情況下應該這樣使用 box,這樣子才能確保box的寬度始終在300px, 而不會出現被撐開的現象,而在ff裡面則不會造成浮動層填不滿的情況。

五、ul 標籤在 mozilla 中有 padding 值的,而在 ie 中只有 margin 有值。

設定ul

六、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 . 最好事先宣告, 以避免不必要的麻煩. (常見於導航標籤和內容列表)

九、關於手形游標hand 只適用於 ie..ie與ff都認的話請用 cursor: pointer

相容IE8,FF瀏覽器全屏

最近常在群時聽到朋友們講做div高度100 時總是不成功 實際高度只有 左右 其實這是對模型不熟悉的結果 在xhtml css中,div標籤也是套在body中,如果只是設定了這個 的高度還是不夠得 因為body的高度沒有設定那麼div設定了 也其實只有1px 如果要做真正的100 效果那麼就要設定類...

CSS相容IE6,IE7,FF的技巧

以下兩種方法幾乎能解決現今所有hack.1,important 隨著ie7對 important的支援,important 方法現在只針對ie6的hack.注意寫法.記得該宣告位置需要提前.注意 html 對ie7的hack 必須保證html頂部有如下宣告 關於 clear float 的原理可參見...

ie瀏覽器相容筆記

ie低版本瀏覽器預設很多標籤是自帶樣式的。ul預設室友padding left 40px li標籤的預設樣式是跟其他瀏覽器不一樣的。預設帶有左邊距16px左右,設定屬性如下即可解決list style position outside position後記得在relative屬性的元素設定浮層 z ...