經常遇到的瀏覽器器相容性

2021-06-22 15:16:02 字數 997 閱讀 5017

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,當外層元素內有float元素時,外層元素如定義margin-top:14px,將自動生成margin-bottom:14px。padding也會出現類似問題,都是ie6下的特產,該類bug 出現的情況較為複雜,遠不只這一種出現條件,還沒系統整理。解決方案:外層元素設定border 或 設定float。 7. 吞吃現象,限於篇幅,我就不展開了。還是ie6,上下兩個div,上面的div設定背景,卻發現下面沒有設定背景的div 也有了背景,這就是吞吃現象。對應上面的背景吞吃現象,還有滾動下邊框缺失的現象。解決方案:使用zoom:1。這個zoom好象是專門為解決ie6 bug而生的。

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

9. 裡加 float ,這是乙個典型的,棘手的相容問題,希望引起大家正視 ,給li 不同的屬性

瀏覽器相容性

瀏覽器相容性是乙個很長久的話題,之所以前端需要面對瀏覽器相容性,是因為使用者的環境有不同的平台,不同的瀏覽器。不同的廠商之間為了相互競爭,對標準的實現不一樣。不同的瀏覽器有不同的核心。即使同乙個瀏覽器也有不同的版本,不同的版本對同一特性的支援情況也不盡相同。也可能某個瀏覽器的某個版本針對某個特性存在...

瀏覽器相容性

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...

瀏覽器相容性

trident ie核心 gecko firefox 核心 webkit chrome,safari blink webkit 的分支 presto 是挪威產瀏覽器 opera 的 前任 核心,為何說是 前任 因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌大本營。移動端的瀏覽器核心主要說...