DIV CSS開發瀏覽器的相容性

2021-06-13 17:35:04 字數 2103 閱讀 3500

div+css開發瀏覽器的相容性

1. 文字本身的大小不相容。同樣是font-size:14px的宋體文字,在不同瀏覽器下佔的空間是不一樣的,ie下實際佔高16px,下留白3px,ff 下實際佔高17px,上留白1px,下留白3px,opera下就更不一樣了。解決方案:給文字設定 line-height 。確保所有文字都有預設的 line-height 值。這點很重要,在高度上我們不能容忍1px 的差異。

2.ff下容器高度限定,即容器定義了height之後,容器邊框的外形就確定了,不會被內容撐大,而ie下是會被內容撐大,高度限定失效。所以不要輕易給容器定義height。

3.橫向上的撐破容器問題,。如果float 容器未定義寬度,ff下內容會盡可能撐開容器寬度,ie下則會優先考慮內容折行。故,內容可能撐破的浮動容器需要定義width。

a. b.

c. d.

上面的**在不同瀏覽器中是不一樣的,實驗起源於對小height 值div 的運用,

,小height 值要配合overflow:hidden一起使用。實驗好玩而已,想說明的是,瀏覽器對容器的邊界解釋是大不相同的,容器內容的影響結果各不相同。

4.最被痛恨的,double-margin bug。ie6下給浮動容器定義margin-left 或者margin-right 實際效果是數值的2倍。解決方案,給浮動容器定義display:inline。

5.mirror margin bug,當外層元素內有float元素時,外層元素如定義margin-top:14px,將自動生成margin-bottom:14px。 padding也會出現類似問題,都是ie6下的特產,該類bug 出現的情況較為複雜,遠不只這一種出現條件,還沒系統整理。解決方案:外層元素設定border 或 設定float。

6. 吞吃現象。還是ie6,上下兩個div,上面的div設定背景,卻發現下面沒有設定背景的div 也有了背景,這就是吞吃現象。對應上面的背景吞吃現象,還有滾動下邊框缺失的現象。解決方案:使用zoom:1。這個zoom好象是專門為解決ie6 bug而生的。

7.注釋也能產生bug~~~「多出來的乙隻豬。」這是前人總結這個bug使用的文案,ie6的這個bug 下,大家會在頁面看到豬字出現兩遍,重複的內容量因注釋的多少而變。解決方案:用「 picrotate start 」方法寫注釋。

把div的border開啟,你發現底部不是緊貼著容器底部的,是img後面的空白字元造成,要消除必須這樣寫

後面兩個標籤要緊挨著。ie7下這個bug 依然存在。解決方案:給img設定 display:block。

9. 失去line-height。

,很遺憾,在ie6下單行文字 line-height 效果消失了。。。,原因是

引申:大家知道img 的align 有 text-top,middle,absmiddle啊什麼的,你可以嘗試去調整img 和文字讓他們在ie和ff下能一致,你會發現怎麼調都不會讓你滿意。索性讓img 和文字都 float起來,用margin 調整。

10.clear層應該單獨使用。也許你為了節省**把clear屬性直接放到下面的乙個內容層,這樣有問題,不僅僅是ff和op下失去margin效果,ie下某些margin值也會失效

ddff

11.ie 下overflow:hidden對其下的絕對層position:absolute或者相對層 position:relative無效。解決方案:給overflow:hidden加position:relative或者position: absolute。另,ie6支援overflow-x或者overflow-y的特性,ie7、ff不支援。

12.ie6下嚴重的bug,float元素如沒定義寬度,內部如有div定義了height或zoom:1,這個div就會佔滿一整行,即使你給了寬度。float元素如果作為布局用或複雜的容器,都要給個寬度的。

13.ie6下的bug,絕對定位的div下包含相對定位的div,如果給內層相對定位的div高度height具體值,內層相對層將具有100%的width值,外層絕對層將被撐大。解決方案給內層相對層float屬性。

14.width:100%這個東西在ie裡用很方便,會向上逐層搜尋width值,忽視浮動層的影響,ff下搜尋至浮動層結束,如此,只能給中間的所有浮動層加width:100%才行,累啊。opera這點倒學乖了跟了ie。 

15,有時候加上div這個樣式那三個瀏覽器就會相同了

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...

div css之瀏覽器間的相容性

jobour 這次處理的相容性問題是同級塊之間css的部分屬性間的問題包括 float margin padding clear!下面看一段html 實現這樣的效果 css的寫法如下 a a active focus body container left l 1 l 2,l 3 l 3 l 4 l...