zoukankan      html  css  js  c++  java
  • 关于IE的几个bug

    1. 居中元素

    居中一個元素是很多前端開發人員在設置樣式的時候會遇到的問題。最簡單的居中方式是在相關的元素上設置 *margin:auto;. 這個方法可以在不考慮父元素的寬度下進行居中。不過,怪異模式下的IE6缺達不到我們想要的效果。

    請看下面代碼:

    #container{
        border: solid 1px #000;
        background: #777;
         400px;
        height: 160px;
        margin: 30px 0 0 30px;
    }
    
    #element{
        background: #95CFEF;
        border: solid 1px #36F;
         300px;
        height: 100px;
        margin: 30px auto;
    
    }
    

    你希望看到的效果:

    IE顯示的結果:

    這是因為IE6怪異模式下或者是早期的IE版本不識別margin:auto所導致的問題,不過,這個問題挺容易修復。

    方法:

    為IE6設置居中最簡單可靠的方法是給父元素添加text-align:center,給居中元素添加text-align: left以確保文本對齊正確

    #container{
        border: solid 1px #000;
        background: #777;
         400px;
        height: 160px;
        margin: 30px 0 0 30px;
        text-align: center;
    }
    
    #element{
        background: #95CFEF;
        border: solid 1px #36F;
         300px;
        height: 100px;
        margin: 30px 0;
        text-align: left;        
    }
    

    2.階梯效應

    大部分的開發人員會在導航欄里使用list通常我們會創建一些容器,再往裡面增加一些<a>標籤,接著設置<a>浮動。但是,在IE裡面,情況比較複雜 如下代碼:

    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
    
    ul {
        list-style: none;
    }    
    
    ul li a {
        display: block;
         130px;
        height: 30px;
        text-align: center;
        color: #fff;
        float: left;
        background: #95CFEF;
        border: solid 1px #36F;
        margin: 30px 5px;
    }
    

    通常瀏覽器會這麼渲染:

    而在IE則會這麼顯示:

    這個看起來效果可不怎麼好,不過我們有兩個方法可以來修復這個問題

    方法1:

    設置li元素浮動而不是<a>浮動

    ul li {
        float: left;
    }
    

    方法2:

    設置li元素display: inline. 這麼做不僅解決了問題,而且同樣解決了下面我們會提到的雙邊距問題。不過有一些人可能不喜歡在行內元素放置塊級元素的做法。

    ul li {
        display: inline
    }
    

    3.浮動產生的雙邊距

    讓一個元素在浮動方向擁有margin效果即可觸發這一個bug

    #element{
        background: #95CFEF;
         300px;
        height: 100px;
        float: left;
        margin: 30px 0 0 30px;
        border: solid 1px #36F;
    }
    

    正常瀏覽器顯示效果:

    IE效果:

    解決這個bug的方法是設置浮動元素的display為inline:

    #element{
        background: #95CFEF;
         300px;
        height: 100px;
        float: left;
        margin: 30px 0 0 30px;
        border: solid 1px #36F;
        display: inline;
    }   
    

    4.元素不可設置較小高度

    有的時候,我們需要設置元素具有較小的高度。通常來說我們只需要設置height:XXpx就可以達到目的。不過,在IE上我們可能會得到雙倍的高度。

    #element{
        background: #95CFEF;
        border: solid 1px #36F;
         300px;
        height: 2px;    
        margin: 30px 0;
    }
    

    我們希望得到這樣的效果:一個有1px邊距,高2px的元素。

    但是在IE:

    引起這個bug的原因是,IE拒絕讓元素的高度比設置的font-size還小。所以設置font-size為0之後我們可以隨便設置一個小尺寸的高度

    #element{
        background: #95CFEF;
        border: solid 1px #36F;
         300px;
        height: 2px;    
        margin: 30px 0;
            font-size: 0;
    }
    

    不過還有一個更好的方法,通過設置overflow: hidden來實現目的

    #element{
        background: #95CFEF;
        border: solid 1px #36F;
         300px;
        height: 2px;    
        margin: 30px 0;
            overflow: hidden
    }
    

    5. Auto Overflow 與相對定位的元素

    當父元素的overflow為auto而其中含有position為relative的元素則會出現這個bug。相對定位的元素會闖出父元素的邊界。

    <div id="element"><div id="anotherelement"></div></div>
    
    #element{
        background: #95CFEF;
        border: solid 1px #36F;
         300px;
        height: 150px;  
        margin: 30px 0;
        overflow: auto;
    }
    
    #anotherelement{
        background: #555;
         150px;
        height: 175px;  
        position: relative;
        margin: 30px;
    }
    

    期望效果:

    IE效果:

    解決方法:設置父元素的position同樣為relative

    #element{
        background: #95CFEF;
        border: solid 1px #36F;
         300px;
        height: 150px;  
        margin: 30px 0;
        overflow: auto;
            position: relative;
    }
    

    6.被破壞的盒子模型

    7.設置最小的寬度與高度

    IE忽略了min-height這個屬性

    解決方法1: 使用!important 來hack

    #element {
      min-height:150px;
      height:auto !important;
      height:150px;
    }
    

    方法2:利用IE不能解析子選擇器的特性

    #element {
        min-height: 150px; 
        height: 150px;
    }
    
    html>body #element { 
        height: auto;
    }
    

    8. 浮動佈局的錯誤行為

    創建一個無表格佈局一個重要的概念是浮動。在大部分情況下,IE6的處理還是差強人意。不過,但遇到了不可破壞的內容或是當元素的寬度超過父元素的寬度,就會出現下面的問題

    <div id="container">
        <div id="element">http://net.tutsplus.com/</div>
        <div id="anotherelement"></div>
    </div>
    
    #element, #anotherelement{
        background: #95CFEF;
        border: solid 1px #36F;
         100px;
        height: 150px;  
        margin: 30px;
        padding: 10px;
        float: left;
    }
    
    #container{
        background: #C2DFEF;
        border: solid 1px #36F;
         365px;   
        margin: 30px;
        padding: 5px;
        overflow: auto;
    }
    

    期望:

    在IE:

    我們可以看到,第一個DIV自己伸展開了以適應它自己的內容

    對於這個bug目前還沒有太好的辦法,不過我們可以設置overflow: hidden來拯救我們的佈局

    #element{
        background: #C2DFEF;
        border: solid 1px #36F;
         365px;   
        margin: 30px;
        padding: 5px;
        overflow: hidden;
    }
    

    9. 列表間的空隙

    IE6會在列表元素間增加一些垂直空間。

    <ul>
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>
    </ul>
    
    ul {
        margin:0; 
        padding:0; 
        list-style:none;
    }
    
    li a {
        background: #95CFEF;
        display: block;
    }
    

    他們應看起來是這樣:

    IE下效果:

    方法1:

    li a {
        background: #95CFEF;
        display: block;
             200px;
    }
    

    方法2:

    li a {
        background: #95CFEF;
        float: left;
            clear: left;
    }
    

    方法3: li { display: inline; }

  • 相关阅读:
    HDU 1058 Humble Numbers
    HDU 1421 搬寝室
    HDU 1176 免费馅饼
    七种排序算法的实现和总结
    算法纲要
    UVa401 回文词
    UVa 10361 Automatic Poetry
    UVa 537 Artificial Intelligence?
    UVa 409 Excuses, Excuses!
    UVa 10878 Decode the tape
  • 原文地址:https://www.cnblogs.com/deryck/p/4480768.html
Copyright © 2011-2022 走看看