相容

IE 瀏覽器常見相容問題

• 相容問題

  • ie中圖片邊框問題

    • 圖片放在a標籤中

    • img {
          border:none
      }
      

  • ie8以下瀏覽器中背景複合屬性的寫法問題

    • .bg {
          background:url("./images/bg.jpg")no-repeat center
      }
      

    • //解決方案：在url和no-repeat 直接加上空格
      .bg {
          background:url("./images/bg.jpg") no-repeat center
      }
      

  • 其他ie低版本相容問題

    • 在IE6及更早瀏覽器中定義小高度的容器

      • #test {
        	overflow:hidden;
            height:1px;
            font-size:0;
            line-height:0;
        }
         
        

    • IE6及更早瀏覽器浮動時產生雙倍邊距的BUG

      • 解決方案：針對ie6設定該標籤的display屬性為inline即可

      • #test {
        	float:left;
            _display:inline;
        }
        

    • IE7及更早瀏覽器下子標籤相對定位時父標籤overflow屬性的auto|hidden失效的問題

      • 解決方案：給父標籤也設定相對定位position:relative;

    • 塊轉行內塊 ie7 不在一行顯示

      • 解決方案：

      • div {
            display:inline-block;
            *display:inline;
            *zoom:1;
        }
        

    • ie7 及以下瀏覽器 清浮動問題

      • 	/* : 單冒號相容性更好，不推薦用雙冒號 :: */
               .clearfix:after {
                   content: '';
                   display: block;
                   clear: both;
               }
         
               /* 相容 ie7 及以下瀏覽器 清浮動問題 */
               .clearfix {
                   *zoom: 1;
               }
        

CSS Hack

• 條件Hack

  • 大於：gt

  • 大於或等於：gte

  • 小於：lt

  • 小於或等於：lte

  • <!--[if IE]>
           <p>只在IE中能看到這個段落</p> 
       <![endif]-->
       //只有IE6以上，才能看到應用了test類的標籤是紅色文字
     <!--[if gt IE 6]>
           <style>
             .test {
                   color:red;
             }
           </style>
     <![endif]-->
     
    

  • IE10以上已經將條件註釋移除，使用時要注意

  • 屬性級Hack

    • _ 下劃線：選擇IE6及以下
    • *：選擇IE7及以下
    • \0：選擇ie8以上

  • color:red;//所有瀏覽器可識別
    _color:red;//僅IE6識別
    *color:red;//IE6、IE7識別
    color:red\0;//IE8、IE9識別
    

  • 選擇符級Hack

    • * html .box {
          background:red;
      }//只有在IE6顯示紅色
      

    • * + html .box {
          background:red;
      }//只有在IE7顯示紅色