前端之CSS常見兼容性問題


1、雙倍浮動BUG:

描述:塊狀元素設置了float屬性后,又設置了橫向的margin值,在IE6下顯示的margin值要比設置的值大;

解決方案:給float的元素添加 display:inline;將其轉換為內聯元素;

2、表單元素行高不一致:

解決方案:

  ①、給表單元素添加vertical-align:middle;

  ②、給表單元素添加float:left;

3、IE6(默認16px為最小)不識別較小高度的標簽(一般為10px):

解決方案:

  ①、給標簽添加overflow:hidden;

  ②、給標簽添加font-size:0;

4、圖片添加超鏈接時,在IE瀏覽器中會有藍色的邊框:

解決方案:

  給圖片添加border:0或者border:none;

5、最小高度min-height不兼容IE6;

解決方案:

  ①、min-height:100px;_height:100px;

  ②、min-height:100px;height:auto!important;height:100px;

6、圖片默認有間隙:

解決方案:

  ①、給img添加float屬性;

  ②、給img添加display:block;

7、按鈕默認大小不一:

解決方案:

  ①、如果按鈕是一張圖片,直接用背景圖作為按鈕圖片;

  ②、用a標記模擬按鈕,使用JS實現其他功能;

8、百分比BUG:

描述:父元素設置100%,子元素各50%,在IE6下,50%+50%大於100%;

解決方案:

  給右邊的浮動元素添加clear:right;

9、鼠標指針BUG:

  cursor:hand 只有IE瀏覽器識別;

  cursor:pointer;IE及以上瀏覽器和其他瀏覽器都識別(手型);

10、透明度設置,IE不識別opacity屬性:

解決方案:

  標准寫法:opacity:value;(取值范圍0-1);

  兼容IE瀏覽器 filter:alpha(opacity=value);(取值范圍1-100);

11、上下margin重疊問題:

描述:給上面的元素設置margin-bottom,給下面的元素設置margin-top,只能識別其中較大的那個值;

解決方案:  

  ①、margin-top和margin-bottom 只設置其中一個值;

  ②、給其中一個元素再包裹一個盒子,並設置over-flow:hidden;

12、給子元素設置margin-top.應用在了父元素上:

解決方案:

  ①、把給子元素設置的margin-top改為給父元素設置padding-top;

  ②、給父元素設置1px的border,即border-top:1px solid transparent;

  ③、給父元素設置over-flow:hidden;

  ④、給父元素設置float:left;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM