坑爹IE瀏覽器兼容性問題-實踐性總結

前言

最近在解決公司官網兼容性問題（兼容要求：ie7+），因而藉機總結一下ie瀏覽器的css兼容性問題，maybe後續會再總結一篇js的兼容性問題。

問題彙總及解決方法

列表li的樓梯Bug（IE六、IE7）

問題描述：li在IE7下呈樓梯狀的效果，一般發生在li中放置了一些元素內容（好比說a）並且對其進行浮動，但li自己不浮動，此時在IE下就會有樓梯上了，具體先看下面的代碼：

如圖：

解決方法
1.讓li也浮動

ul li{
    float:left;
}

2.改變li的顯示方式

ul li{
    display:inline;
}

li / a 標籤豎排出現莫名間距

如圖：

解決方法
1.給a標籤/li標籤設置浮動

li / a{
    float:left;
    clear:both;
}

三個行內元素並排但有一個元素浮動，浮動的元素出如今下方

**html**
<p class="gift_nav">
    <span class="libao_zhongxin">新聞資訊/</span>
    <span class="gift_center">NEWS</span>
    <span class="dangqian_weizhi">當前位置：<a href="/dzz/home">官網首頁&gt</a>
    <span class="zhongxin">新聞資訊</span>
    </span>
</p>

**css**
.gift_nav{
    width:100%;
    float:left;
    margin:0 auto;
    margin-top:40px;
 }
.libao_zhongxin{
    font-size:32px;
    font-family:'方正北魏楷書簡體';
    color:#112763;
} 
.gift_center{
    font-size:16px;
    font-family:'方正北魏楷書簡體';
    color:#112763;
}
.dangqian_weizhi{
    float:right;
    margin-top:15px;
    font-size:14px;
}

如圖：

解決方法：
不要使用float定位，先對要浮動元素的父元素進行position:relative;定位而後對要右定位的元素進行position:absolute;right:0;top:15px;便可

li顯示爲inline可是沒有浮動，ie7如下li並不能並排而是獨佔一行

**HTML**
<div class="pagination_outer">
    <ul class="pagination">
        <li><a class="btn btn-default <?php if($page-1<1){ echo 'disabled'; } ?>" role="button" href="<?php echo "$listurl?page=".($page-1)."&".$params; ?>" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
        <li><a class="btn btn-default" href="<?php echo "$listurl?page=".$page."&".$params; ?>"><?php echo $page; ?></a></li>
        <li><a class="btn btn-default <?php if($page+1>$totalPage){ echo 'disabled'; } ?>" <?php if($page+1>$totalPage){echo "style='display:none;'";}?> href="<?php echo "$listurl?page=".($page+1)."&".$params; ?>"><?php echo $page+1; ?></a></li>
        <li><a class="btn btn-default <?php if($page+2>$totalPage){ echo 'disabled'; } ?>" <?php if($page+2>$totalPage){echo "style='display:none;'";}?> href="<?php echo "$listurl?page=".($page+2)."&".$params; ?>"><?php echo $page+2; ?></a></li>
        <li><a class="btn btn-default <?php if($page+1>$totalPage){ echo 'disabled'; } ?>" href="<?php echo "$listurl?page=".($page+1)."&".$params; ?>" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
    </ul>
</div>

**CSS**
.pagination_outer{
    width:100%;
    height:74px;
    float:left;
    text-align:center;
}
.pagination_outer .pagination a{
    float:none;
    border-radius:0 !important;
}

解決方法
1.使li浮動
2.使ul浮動

上一個相鄰塊設置了高度，可是它實際內容超出了高度，ie瀏覽器中下一個塊會跟在它所設置的高度屁股後面而不是被實際內容擠下到下面

**html**
<div class="gift-container">
    <div classs="content"></div>
</div>
<div class="footer"></div>
**css**
.gift_container {
    width: 1120px;
    height: 800px;
    margin: 0 auto;
    margin-top: 468px;
}
//實際上content的內容超過了800px
.footer {
    width: 100%;
    color: #fffcfd;
    font-size: 15px;
    overflow: hidden;
    margin-top: 15px;
}

如圖：

解決方法
很簡單，把設置的高度去掉就好啦。。。/笑哭

給div設置了overflow-y:auto，ie7瀏覽器下overflow-x默認爲overflow-x:visible;

div{
    padding:0 40px;
    background:#fff;
    height:1072px;
    overflow-y:auto;
}

如圖：

IE瀏覽器計算屬性：

解決方法：
overflow-x:hidden

包含浮動元素的div所需的寬度在ie瀏覽器下比在標準瀏覽器下要寬

如圖：

---

參考資料 - 鳴謝

IE常見Bug——part1