常遇到的瀏覽器相容性問題
阿新 • • 發佈:2018-11-10
1. ie6雙倍邊距
在使用了float的情況下,不管是向左還是向右都會出現雙倍,最簡單的解決方法就是用display:inline;加到css裡面去。
2. 文字本身的大小不相容。
同樣是font-size:14px的宋體文字,在不同瀏覽器下佔的空間是不一樣的,ie下實際佔高16px,下留白3px,ff下實際佔高17px,上留白1px,下留白3px,opera下就更不一樣了。
解決方案:給文字設定 line-height 。確保所有文字都有預設的 line-height 值。這點很重要,在高度上我們不能容忍1px 的差異。
3. ff下容器高度限定,即容器定義了height之後,容器邊框的外形就確定了,不會被內容撐大,而ie下是會被內容撐大,高度限定失效。所以不要輕易給容器定義height。
4. 內容撐破容器問題。
如果float 容器未定義寬度,ff下內容會盡可能撐開容器寬度,ie下則會優先考慮內容折行。所以,內容可能撐破的浮動容器需要定義width。
5. 浮動的清除,ff下不清除浮動是不行的。
6. mirrormargin bug
ie6下,當外層元素內有float元素時,外層元素如定義margin-top:14px,將自動生成margin-bottom:14px。padding也會出現類似問題。解決方案:外層元素需要設定border 或 設定float。
7. 吞吃現象。
ie6下,上下兩個div,上面的div設定背景,卻發現下面沒有設定背景的div 也有了背景,這就是吞吃現象。對應上面的背景吞吃現象,還有滾動下邊框缺失的現象。
解決方案:使用zoom:1。這個zoom好象是專門為解決ie6 bug而生的。