piczoom相容性問題 相容性問題

2021-10-20 23:50:44 字數 1973 閱讀 3570

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。

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 效果消失了。。。,原因是這個inline-block元素和inline元素寫在一起了。解決方案:讓img 和文字都 float起來。

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

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

ff 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這個樣式那三個瀏覽器就會相同了

相容性問題

原文 1.ie浮動 margin 產生的雙倍距離 box 2.display inline block ie6,7下不相容 用float left 3.position fixed ie6不支援 ie6下用position和js模擬,或者完全不用,用position和js模擬 4.cursor ha...

相容性問題

ie6下最小高度為19px,增加font size 0後可縮小為2px 還是沒解決嘛 orz。增加overflow hidden屬性,截掉多餘的高度!ie6 ie7只支援標籤的四個偽類 lvha 不支援其他偽類。ie6,7下父級有寬度就可以不用清浮動,其他瀏覽器不可以哦 haslayout屬性 在i...

相容性問題

最近,問了很多有關相容性問題的解決示例,大部分人回答都是非常片面,甚至可以說是他們基本上沒有碰到什麼相容性問題。對於很多用jquery的前端來說,基本上很難在js上碰到相容問題,大部分如dom操作,事件等之類相容問題,jquery都能很好的解決。那為啥現在的趨勢是 去jquery 化呢?為此,vue...