CSS常見兼容性問題及解決方案：

1. 上下margin重合問題：

問題描述：相鄰的margin-left和margin-right是不會重合的，但是相鄰的塊級元素margin-top 和margin-bottom會產生重合。

解決方案：統一設置margin-top或者 Marin-bottom，不要混合使用。

2.超鏈接訪問后，hover樣式不顯示：

問題描述：同時設置a:visited和a:hover樣式后，超鏈接訪問后，hover的樣式不顯示，

問題原因：標簽中的樣式順序出現了錯誤。

解決方案：將他們的樣式排序為 a:link , a:visited , a:hover , a:active .

3.行內元素上下margin及padding不拉開元素間距的問題：

問題描述：行內元素的margin和padding屬性很奇怪，水平方向的padding-left、padding-right、margin-left、margin-right都產生邊距效果，但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不會產生邊距效果。

解決方案：將行內元素display設置為block即可解決

4.不同瀏覽器的標簽默認的外間距和內間距不同

問題描述：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。

解決方案：在CSS文件開頭用通配符*來設置各個標簽的內外邊距是0。

*{margin: 0px;padding:0px;}

5.ul在瀏覽器中不同表現，具有默認邊距在不同瀏覽器中顯示的位置不同：

問題描述：在IE中，ul的默認邊距是margin，在Firefox中，ul的默認邊距是padding。

解決方案：設置其屬性 padding：0px ; Margin : 0px;

6.按鈕默認大小不一：

問題描述：不同瀏覽器的默認按鈕大小可能不同。

解決方案：用a標簽來模擬按鈕，添加樣式；如果按鈕是一張背景圖片，那么直接給按鈕添加背景圖；

7.圖片間默認又間距問題：

問題描述：幾個img標簽（行內標簽）放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。

解決方案：使用float屬性為img布局

8.雙倍浮動問題：

問題描述：塊狀元素float后，有添加了橫向的margin，在IE6下比設置的值要大。

解決方案：給float標簽添加display：inline，將其轉換為行內元素

9.設置較小高度的容器（小于10px），在IE6下不識別小于10px的高度

問題描述：IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度，一般會出現在設置小圓角背景標簽里。

解決方案：給容器添加overflow：hidden；或者設置行高line-height 小于你設置的高度。

10.容器不擴展問題：

問題描述：div嵌套結構中，外層的高度并沒有隨著子容器的高度自動擴展，卻是形成了一條線。

問題原因：因為當子容器成為浮動元素后，并脫離了文檔流，父容器認為自己內容為空而導致的。

解決問題：在容器的末尾加入個清理浮動的div。 在網頁中的任何地方，當遇到容器不擴展時，只需加入以下代碼段，便能修復問題。

本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?

總結

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题第三十六篇之CSS常见兼容性问题及解决方案（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。