回顧div css相容多數瀏覽器的一些解決方案

2021-06-10 11:09:08 字數 3538 閱讀 1235

1.doctype 影響 css 處理

2.ff: div 設定 margin-left, margin-right 為 auto 時已經居中, ie 不行

3.ff: body 設定 text-align 時, div 需要設定 margin: auto(主要是 margin-left,margin-right) 方可居中

4.ff: 設定 padding 後, div 會增加 height 和 width, 但 ie 不會, 故需要用 !important 多設乙個 height 和 width

5.ff: 支援 !important, ie 則忽略, 可用 !important 為 ff 特別設定樣式

6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個div一樣高 line-height:200px; 然後插入文字,就垂直居中了。缺點是要控制內容不要換行

7.cursor: pointer 可以同時在 ie ff 中顯示游標手指狀, hand 僅 ie 可以

8.ff: 鏈結加邊框和背景色,需設定 display: block, 同時設定 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設定高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入乙個空格。

9.在mozilla firefox和ie中的box模型解釋不一致導致相差2px解決方法: div注意這兩個margin的順序一定不能寫反,據阿捷的說法! important這個屬性ie不能識別,但別的瀏覽器可以識別。所以在ie下其實解釋成這樣: div重複定義的話按照最後乙個來執行,所以不可以只寫margin:xxpx! important;

11.ul標籤在mozilla中預設是有padding值的,而在ie中只有margin有值所以先定義 ul就能解決大部分問題

注意事項:

1、float的div一定要閉合。

例如:(其中floata、floatb的屬性已經設定為float:left;)

<#div id=」floata」 >

<#div id=」floatb」 >

<#div id=」notfloatc」 >

這裡的notfloatc並不希望繼續平移,而是希望往下排。

這段**在ie中毫無問題,問題出在ff。原因是notfloatc並非float標籤,必須將float標籤閉合。

在<#div class=」floatb」>

<#div class=」notfloatc」>

之間加上

<#div class=」clear」>

這個div一定要注意宣告位置,一定要放在最恰當的地方,而且必須與兩個具有float屬性的div同級,之間不能存在巢狀關係,否則會產生異常。

並且將clear這種樣式定義為為如下即可:

**如下:

.clear

2、margin加倍的問題

設定為float的div在ie下設定的margin會加倍。這是乙個ie6都存在的bug。

解決方案是在這個div裡面加上display:inline;

例如:<#div id=」imfloat」>

相應的css為

**如下:

#iamfloat

3、關於容器的包涵關係

很多時候,尤其是容器內有平行布局,例如兩、三個float的div時,寬度很容易出現問題。在ie中,外層的寬度會被內層更寬的div擠破。一定要用photoshop或者firework量取畫素級的精度。

4、關於高度的問題

如果是動態地新增內容,高度最好不要定義。瀏覽器可以自動伸縮,然而如果是靜態的內容,高度最好定好。(似乎有時候不會自動往下撐開,不知道具體怎麼回事)

5、最狠的手段 - !important;

如果實在沒有辦法解決一些細節問題,可以用這個方法.ff對於」!important」會自動優先解析,然而ie則會忽略.如下

**如下:

.tabd1

值得注意的是,一定要將***x !important 這句放置在另一句之上,上面已經提過

ie7.0出來了,對css的支援又有新問題。瀏覽器多了,網頁相容性更差了,疲於奔命的還是我們 ,為解決ie7.0的相容問題,找來了下面這篇文章:

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

現在寫乙個css可以這樣:

**如下:

#example /* moz */

* html #example /* ie6 */

*+html #example /* ie7 */

那麼在firefox下字型顏色顯示為#333,ie6下字型顏色顯示為#666,ie7下字型顏色顯示為#999.

-----------------------------

關於css對各個瀏覽器相容已經是老生常談的問題了, 網路上的教程遍地都是.以下內容沒有太多新穎, 純屬個人總結, 希望能對初學者有一定的幫助.

一、css hack以下兩種方法幾乎能解決現今所有hack.

1, !important

隨著ie7對!important的支援, !important 方法現在只針對ie6的hack.(注意寫法.記得該宣告位置需要提前.)

2, ie6/ie77對firefox

*+html 與 *html 是ie特有的標籤, firefox 暫不支援.而*+html 又為 ie7特有標籤.

注意:*+html 對ie7的hack 必須保證html頂部有如下宣告:

">

二、萬能 float 閉合

關於 clear float 的原理可參見 [how to clear floats without structural markup]

將以下**加入global css 中,給需要閉合的div加上 class="clearfix" 即可,屢試不爽.

**如下:

**如下:

#1 /* moz */

* html #1 /* ie6 */

*+html #1 /* ie7 */

那麼在firefox下字型顏色顯示為#333,ie6下字型顏色顯示為#666,ie7下字型顏色顯示為#999。

2 css布局中的居中問題

主要的樣式定義如下:

body

#center

說明:首先在父級元素定義text-align: center;這個的意思就是在父級元素內的內容居中;對於ie這樣設定就已經可以了。

但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上「margin-right: auto;margin-left: auto; 」

需要說明的是,如果你想用這個方法使整個頁面要居中,建議不要套在乙個div裡,你可以依次拆出多個div,

只要在每個拆出的div裡定義margin-right: auto;margin-left: auto; 就可以了。

3 盒模型不同解釋

**如下:

#box

#box

DIV CSS開發瀏覽器的相容性

div css開發瀏覽器的相容性 1.文字本身的大小不相容。同樣是font size 14px的宋體文字,在不同瀏覽器下佔的空間是不一樣的,ie下實際佔高16px,下留白3px,ff 下實際佔高17px,上留白1px,下留白3px,opera下就更不一樣了。解決方案 給文字設定 line heigh...

DIV CSS開發瀏覽器的相容性

1.文字本身的大小不相容。同樣是font size 14px的宋體文字,在不同瀏覽器下佔的空間是不一樣的,ie下實際佔高16px,下留白3px,ff 下實際佔高17px,上留白1px,下留白3px,opera下就更不一樣了。解決方案 給文字設定 line height 確保所有文字都有預設的 lin...

DIV CSS開發瀏覽器的相容性

1.文字本身的大小不相容。同樣是font size 14px的宋體文字,在不同瀏覽器下佔的空間是不一樣的,ie下實際佔高16px,下留白3px,ff 下實際佔高17px,上留白1px,下留白3px,opera下就更不一樣了。解決方案 給文字設定 line height 確保所有文字都有預設的 lin...