網頁設計(div css)之瀏覽器不兼容性問題及解決方法

下面將瀏覽器不兼容緣由及解決方法整理一下,不足之處之後遇到再繼續補充:css

1. 文字大小不兼容瀏覽器

一樣14px的宋體字,ie下實際佔高16px,下留白3px,firefox下實際佔高17px,上留白1px,下留白3px。佈局

文字大小不兼容解決方案: 給全部文字設定通用line-height值spa


2.div高度不兼容firefox

firefox下div容器定義height後,div不會由於內容超出height而撐大,而i6e下是會被內容撐大,高度限定失效。因此不要輕易給容器定義height。orm

div高度不兼容解決方案:若是設置高度,須要同時把內容物高度限定,也就是溢出隱藏處理:overflow:hidden;或者當須要隨着內容自適應高度,但又想div有一個最小的高度時候,像這樣作min-height: 1400px;max-height:none;_height: 1400px;token


3.div寬度不兼容圖片

若是div容器設定float浮動但沒設定寬度,那麼也會出現ie6和firefox的不兼容。firefox下內容會撐開容器滲入它前面的div,ie6下該div內容折行而不是咱們想象的與同級div在同一行。 get

div寬度不兼容解決方案:浮動div容器通常需定義width。it


4.div浮動不兼容

當前面div有左浮動和右浮動,下面div就會受他們影響也有浮動。ie也許不用加清除,但firefox下不清除浮動是不行的。

div浮動不兼容解決方案:給下面的div設定清除 clear:both;


5. double-margin不兼容

ie6下給浮動容器定義margin-left 或者margin-right 實際效果是數值的2倍。

解決方案:給浮動容器定義display:inline。


6. mirror margin不兼容

當外層元素內有float元素時,外層元素如定義margin-top:14px,將自動生成margin-bottom:14px.padding也會出現相似問題,都是ie6下的特產,該類bug 出現的狀況較爲複雜,遠不僅這一種出現條件,還沒系統整理。引伸:ff 和ie 下對容器的margin-bottom,padding-bottom的解釋有時不一致,彷佛與之相關。

解決方案:外層元素設定border 或設定float。


7.吞吃現象

仍是ie6,上下兩個div,上面div設置背景,卻發現下面沒有設置背景的div 也有了背景,這就是吞吃現象。對應上面的背景吞吃現象,還有滾動下邊框缺失的現象。

解決方案:使用zoom:1.這個zoom好象是專門爲解決ie6 bug而生的。


8.註釋也能產生bug

多出來的一隻豬,這是前人總結這個bug使用的比喻。ie6下這個bug,你們會在頁面看到豬字出現兩遍,重複內容量因註釋的多少而變。

解決方案:用"<!-[if !IE]> picRotate start <![endif]->"方法寫註釋。


9.<li/>里加 float <div/>

這是一個典型的,棘手的兼容問題,但願引發你們重視。,給li不一樣的屬性會有不一樣的解釋效果,ff下的解釋稍可理解,ie6下的解釋會讓你摸不着頭腦。在《ul使用心得》一文裏有相關成果,卻沒給出問題解決過程。


10.使用了"float:left;display:inline"的ul的奇怪表現

能夠看出這句css是針對ie6下的double margin bug 而加上的display:inline,這也是個人css體系裏的重要一環,在《ul使用心得》一文中有相關闡述。而這句css用在ul上會讓你痛苦不堪。


11.img下的留白

你們看這段代碼有啥問題:<div><imgsrc=""mce_src=""/></div>把div的border打開,你發現圖片底部不是緊貼着容器底部的,是img後面的空白字符形成,要消除必須這樣寫<div><imgsrc=""mce_src=""/></div>後面兩個標籤要緊挨着.ie7下這個bug 依然存在。

解決方案:給img設定 display:block。


12.失去line-height

<divstyle="line-height:20px"><img/>文字</div>,很遺憾,在ie6下單行文字 line-height 效果消失了,緣由是<img/>這個inline-block元素和inline元素寫在一塊兒了。

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


13.連接的hover狀態

a:hover img{width:300px} 咱們想讓鼠標hover時,連接裏包含圖片寬度變化,惋惜在ie6下無效,ie七、ff下有效。


14.非連接的hover狀態

div:hover{} 這樣的樣式ie6是不認的,在ie七、ff下才有效果。


15.block化的a連接

其內套absolute層,absolute層內放置img,ie下,鼠標點擊img不會有連接效果,firefox、opera下正常。


上面的諸多問題若是你掌握了其中奧妙,90%的不兼容問題不須要另起css hack的。


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


17.ie6下嚴重的bug,float元素如沒定義寬度,內部若有div定義了height或zoom:1,這個div就會佔滿一整行,即便你給了寬度.float元素若是做爲佈局用或複雜的容器,都要給個寬度的。


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


19.ie6下的bug,<head></head>內有<basetarget="_blank"/>的狀況下,position:relative層下的float層內文字沒法選中。這個bug迫使我修公用樣式庫。


20.終於來了個firefox缺點 width:100%這個東西在ie裏用很方便,會向上逐層搜索width值,忽視浮動層的影響,ff下搜索至浮動層結束,如此只能給中間的全部浮動層加width:100%才行,累啊.opera這點倒學乖了跟了ie。


21. Padding vs. Margin

對於瀏覽器來講,Margin是兼容性最差的一個屬性。所以只要條件容許,儘量的使用Padding屬性。