日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
為Web程序員解毒：9個IE常見Bug的解決方案

本文來自酷殼coolshell.cn的《9個最常見IE的Bug及其fix》一文，改動了部分筆誤。

創(chuàng)新互聯(lián)2013年開創(chuàng)至今，先為合肥等服務(wù)建站，合肥等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為合肥企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

#t#Internet Explorer – Web程序員的毒藥。在IE上開發(fā)時間中有超過60%的時間是花在和IE的bug進行搏斗，讓你的開發(fā)生產(chǎn)率嚴重下降。下面是一個教程，告訴你了9個IE上最常見的BUG以及如何解決它們。

1. 居中布局

創(chuàng)建一個CSS定義把一個元素經(jīng)放到中間的位置，可能是每一個Web開發(fā)人員都會做的事情。最簡單的做法是為你的元素增加一個margin: auto; ，然而 IE 6.0 會出現(xiàn)很多奇怪的行為。讓我們來看一個例子。

 
 
 
 
    
  
  
  
  
  1. #container{  
    2. 
  
  
  
  
  2.     border: solid 1px #000;  
    3. 
  
  
  
  
  3.     background: #777;  
    4. 
  
  
  
  
  4.     width: 400px;  
    5. 
  
  
  
  
  5.     height: 160px;  
    6. 
  
  
  
  
  6.     margin: 30px 0 0 30px;  
    7. 
  
  
  
  
  7. }  
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. #element{  
    10. 
  
  
  
  
  10.     background: #95CFEF;  
    11. 
  
  
  
  
  11.     border: solid 1px #36F;  
    12. 
  
  
  
  
  12.     width: 300px;  
    13. 
  
  
  
  
  13.     height: 100px;  
    14. 
  
  
  
  
  14.     margin: 30px auto;  
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16. } 
    17.

下面是我們所期望的輸出：

但IE卻給我們這樣的輸出：

這應(yīng)該是IE 6對margin的 auto 并沒有正確的設(shè)置。但幸運的是，這是很容易被修正的。

解決方法

最簡單的方法是在父元素中使用 text-align: center 屬性，而在元件中使用 text-align: left 。

 
 
 
 
    
  
  
  
  
  1. #container{  
    2. 
  
  
  
  
  2.     border: solid 1px #000;  
    3. 
  
  
  
  
  3.     background: #777;  
    4. 
  
  
  
  
  4.     width: 400px;  
    5. 
  
  
  
  
  5.     height: 160px;  
    6. 
  
  
  
  
  6.     margin: 30px 0 0 30px;  
    7. 
  
  
  
  
  7.     text-align: center;  
    8. 
  
  
  
  
  8. }  
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10. #element{  
    11. 
  
  
  
  
  11.     background: #95CFEF;  
    12. 
  
  
  
  
  12.     border: solid 1px #36F;  
    13. 
  
  
  
  
  13.     width: 300px;  
    14. 
  
  
  
  
  14.     height: 100px;  
    15. 
  
  
  
  
  15.     margin: 30px 0;  
    16. 
  
  
  
  
  16.         text-align: left;  
    17. 
  
  
  
  
  17.  
    18. 
  
  
  
  
  18. } 
    19.

2. 樓梯式的效果

幾乎所有的Web開發(fā)者都會使用list來創(chuàng)建導(dǎo)航條。下面是你可能會用到的代碼：

 
 
 
 
    
  
  
  
  
    1.  
  
  
  
  
    •     
    •  href="#">
      •  
  
  
  
  
    •     
    •  href="#">
      •  
  
  
  
  
    •     
    •  href="#">
      •  
  
  
  
  
     
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. ul {  
    2. 
  
  
  
  
  2.     list-style: none;  
    3. 
  
  
  
  
  3. }  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. ul li a {  
    6. 
  
  
  
  
  6.     display: block;  
    7. 
  
  
  
  
  7.     width: 130px;  
    8. 
  
  
  
  
  8.     height: 30px;  
    9. 
  
  
  
  
  9.     text-align: center;  
    10. 
  
  
  
  
  10.     color: #fff;  
    11. 
  
  
  
  
  11.     float: left;  
    12. 
  
  
  
  
  12.     background: #95CFEF;  
    13. 
  
  
  
  
  13.     border: solid 1px #36F;  
    14. 
  
  
  
  
  14.     margin: 30px 5px;  
    15. 
  
  
  
  
  15. }  
    16.

 一個符合標準的瀏覽器會是下面這樣：

但IE卻是這樣的：

下面是兩個解決方法

解決方法一

設(shè)置li元件的float屬性。

 
 
 
 
    
  
  
  
  
  1. ul li { float: left; }  
    2.

解決方法二

設(shè)置 display: inline 屬性。

 
 
 
 
    
  
  
  
  
  1. ul li {  
    2. 
  
  
  
  
  2.     display: inline 
    3. 
  
  
  
  
  3. }  
    4.

3. float元件的兩倍空白

請看下面的代碼：

 
 
 
 
    
  
  
  
  
  1. #element{  
    2. 
  
  
  
  
  2.     background: #95CFEF;  
    3. 
  
  
  
  
  3.     width: 300px;  
    4. 
  
  
  
  
  4.     height: 100px;  
    5. 
  
  
  
  
  5.     float: left;  
    6. 
  
  
  
  
  6.     margin: 30px 0 0 30px;  
    7. 
  
  
  
  
  7.     border: solid 1px #36F;  
    8. 
  
  
  
  
  8. }  
    9.

期望的結(jié)果是：

IE的結(jié)果是：

解決方案

和上面那個BUG的解決方案一樣，設(shè)置 display: inline 屬性可以解決問題。

 
 
 
 
    
  
  
  
  
  1. #element{  
    2. 
  
  
  
  
  2.     background: #95CFEF;  
    3. 
  
  
  
  
  3.     width: 300px;  
    4. 
  
  
  
  
  4.     height: 100px;  
    5. 
  
  
  
  
  5.     float: left;  
    6. 
  
  
  
  
  6.     margin: 30px 0 0 30px;  
    7. 
  
  
  
  
  7.     border: solid 1px #36F;  
    8. 
  
  
  
  
  8.     display: inline;  
    9. 
  
  
  
  
  9. }  
    10.

4. 無法設(shè)置微型高度

我們發(fā)現(xiàn)在IE中使用 height: XXpx 這樣的屬性無法設(shè)置比較小的高度。下面是個例子（注意高度是2px）：

 
 
 
 
    
  
  
  
  
  1. #element{  
    2. 
  
  
  
  
  2.     background: #95CFEF;  
    3. 
  
  
  
  
  3.     border: solid 1px #36F;  
    4. 
  
  
  
  
  4.     width: 300px;  
    5. 
  
  
  
  
  5.     height: 2px;  
    6. 
  
  
  
  
  6.     margin: 30px 0;  
    7. 
  
  
  
  
  7. }  
    8.

期望結(jié)果： 2px的元件加1px的邊框.

IE的結(jié)果：

解決方案一

這個BUG的產(chǎn)生原因很簡單，IE不允許元件的高度小于字體的高度，所以，下面的fix是設(shè)置上字體大小。

 
 
 
 
    
  
  
  
  
  1. #element{  
    2. 
  
  
  
  
  2.     background: #95CFEF;  
    3. 
  
  
  
  
  3.     border: solid 1px #36F;  
    4. 
  
  
  
  
  4.     width: 300px;  
    5. 
  
  
  
  
  5.     height: 2px;  
    6. 
  
  
  
  
  6.     margin: 30px 0;  
    7. 
  
  
  
  
  7.         font-size: 0;  
    8. 
  
  
  
  
  8. }  
    9.

解決方案二

但是最佳的解決方法是使用 overflow: hidden 。

 
 
 
 
    
  
  
  
  
  1. #element{  
    2. 
  
  
  
  
  2.     background: #95CFEF;  
    3. 
  
  
  
  
  3.     border: solid 1px #36F;  
    4. 
  
  
  
  
  4.     width: 300px;  
    5. 
  
  
  
  
  5.     height: 2px;  
    6. 
  
  
  
  
  6.     margin: 30px 0;  
    7. 
  
  
  
  
  7.         overflow: hidden 
    8. 
  
  
  
  
  8. }  
    9.

5. 跨出邊界

這個BUG是很難看的。當(dāng)父元件中使用了 overflow 的 auto 屬性，并且在其里放入相關(guān)元件。你會看來里面的元件會跨出來。下面是一個示例：

 
 
 
 
    
  
  
  
  
  1.  id="element"> id="anotherelement">
  
 
 
 
 
    
  
  
  
  
  1. #element{  
    2. 
  
  
  
  
  2.     background: #95CFEF;  
    3. 
  
  
  
  
  3.     border: solid 1px #36F;  
    4. 
  
  
  
  
  4.     width: 300px;  
    5. 
  
  
  
  
  5.     height: 150px;  
    6. 
  
  
  
  
  6.     margin: 30px 0;  
    7. 
  
  
  
  
  7.     overflow: auto;  
    8. 
  
  
  
  
  8. }  
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10. #anotherelement{  
    11. 
  
  
  
  
  11.     background: #555;  
    12. 
  
  
  
  
  12.     width: 150px;  
    13. 
  
  
  
  
  13.     height: 175px;  
    14. 
  
  
  
  
  14.     position: relative;  
    15. 
  
  
  
  
  15.     margin: 30px;  
    16. 
  
  
  
  
  16. }  
    17.

期望的結(jié)果：

IE的結(jié)果：

解決方法

設(shè)置 position: relative;屬性

 
 
 
 
    
  
  
  
  
  1. #element{  
    2. 
  
  
  
  
  2.     background: #95CFEF;  
    3. 
  
  
  
  
  3.     border: solid 1px #36F;  
    4. 
  
  
  
  
  4.     width: 300px;  
    5. 
  
  
  
  
  5.     height: 150px;  
    6. 
  
  
  
  
  6.     margin: 30px 0;  
    7. 
  
  
  
  
  7.     overflow: auto;  
    8. 
  
  
  
  
  8.         position: relative;  
    9. 
  
  
  
  
  9. }  
    10.

6. Fixing the Broken Box Model

Internet Explorer曲解了“盒子模子”可能是最不可原諒的事情了。IE 6 這個半標準的瀏覽器回避了這個事情，但這個問題還是會因為IE運行在“怪異模式”下出現(xiàn)。

兩個Div元件。一個是有fix的，一個是沒有的。而他們不同的高和寬加上padding的總合卻是不一樣的。下圖的上方是被修正的，下方則沒有。

解決方法

我相信這個事情即不需要解釋也不需要演示，這應(yīng)該是大多數(shù)人都明白的。下面是一個很相當(dāng)怪異的解決方案

 
 
 
 
    
  
  
  
  
  1. #element{  
    2. 
  
  
  
  
  2.     width: 400px;  
    3. 
  
  
  
  
  3.         height: 150px;  
    4. 
  
  
  
  
  4.     padding: 50px;  
    5. 
  
  
  
  
  5. }  
    6.

上面的定義也就是說：

 
 
 
 
    
  
  
  
  
  1. #element {  
    2. 
  
  
  
  
  2.     width: 400px;  
    3. 
  
  
  
  
  3.     height: 150px;  
    4. 
  
  
  
  
  4.    \height: 250px;  
    5. 
  
  
  
  
  5.    \width: 500px 
    6. 
  
  
  
  
  6. }  
    7.

是的，你要原來的長和寬上加上了padding。但這個fix只會作用于IE了的“怪異模式”，所以你不需要擔(dān)心在IE6的正常模式下會有問題。

7. 設(shè)置min-height和min-width

IE忽略了min-height。

解決方法一

這個fix由 Dustin Diaz提供。其利用了 !important 下面是代碼片段：

 
 
 
 
    
  
  
  
  
  1. #element {  
    2. 
  
  
  
  
  2.   min-height:150px;  
    3. 
  
  
  
  
  3.   height:auto !important;  
    4. 
  
  
  
  
  4.   height:150px;  
    5. 
  
  
  
  
  5. }  
    6.

解決方法二

 
 
 
 
    
  
  
  
  
  1. #element {  
    2. 
  
  
  
  
  2.     min-height: 150px;  
    3. 
  
  
  
  
  3.     height: 150px;  
    4. 
  
  
  
  
  4. }  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. html>body #element {  
    7. 
  
  
  
  
  7.     height: auto;  
    8. 
  
  
  
  
  8. }  
    9.

8. Float 布局錯誤行為 Misbehaving

使用無table的布局最重要的就是使用CSS的float元件。在很多情況下，IE6處理起來好像在摸索階段，有些時候，你會發(fā)現(xiàn)很多奇怪的行為。比如在其中有一些文本的時候。

來看一下下面這個示例：

 
 
 
 
    
  
  
  
  
  1.  id="container"> 
    2. 
  
  
  
  
  2.      id="element">http://net.tutsplus.com/
 
  •      id="anotherelement">
    •  
    •  

      

       
 
 
 
      
    
  
  
  
    1. #element, #anotherelement{  
      2. 
    
  
  
  
    2.     background: #95CFEF;  
      3. 
    
  
  
  
    3.     border: solid 1px #36F;  
      4. 
    
  
  
  
    4.     width: 100px;  
      5. 
    
  
  
  
    5.     height: 150px;  
      6. 
    
  
  
  
    6.     margin: 30px;  
      7. 
    
  
  
  
    7.     padding: 10px;  
      8. 
    
  
  
  
    8.     float: left;  
      9. 
    
  
  
  
    9. }  
      10. 
    
  
  
  
    10.  
      11. 
    
  
  
  
    11. #container{  
      12. 
    
  
  
  
    12.     background: #C2DFEF;  
      13. 
    
  
  
  
    13.     border: solid 1px #36F;  
      14. 
    
  
  
  
    14.     width: 365px;  
      15. 
    
  
  
  
    15.     margin: 30px;  
      16. 
    
  
  
  
    16.     padding: 5px;  
      17. 
    
  
  
  
    17.     overflow: auto;  
      18. 
    
  
  
  
    18. }  
      19.

    期望結(jié)果：

    IE的結(jié)果：

    你可以看到其中的不同了

    解決方法

    要解決這個問題沒有什么好的方法。只有一個方法，那就是使用 overflow: hidden 。

     
 
 
 
      
  
  
  
  
    1. #element{  
      2. 
  
  
  
  
    2.     background: #C2DFEF;  
      3. 
  
  
  
  
    3.     border: solid 1px #36F;  
      4. 
  
  
  
  
    4.     width: 365px;  
      5. 
  
  
  
  
    5.     margin: 30px;  
      6. 
  
  
  
  
    6.     padding: 5px;  
      7. 
  
  
  
  
    7.     overflow: hidden;  
      8. 
  
  
  
  
    8. }  
      9.

    9. 在list項目門的空行

    先看下面的例子

     
 
 
 
      
  
  
  
  
      1.  
  
  
  
  
      •  
      •  href="#">Link 1
        •  
  
  
  
  
      •  
      •  href="#">Link 2
        •  
  
  
  
  
      •  
      •  href="#">Link 3
        •  
  
  
  
  
       
      2. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. ul {  
      2. 
  
  
  
  
    2.     margin:0;  
      3. 
  
  
  
  
    3.     padding:0;  
      4. 
  
  
  
  
    4.     list-style:none;  
      5. 
  
  
  
  
    5. }  
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7. li a {  
      8. 
  
  
  
  
    8.     background: #95CFEF;  
      9. 
  
  
  
  
    9.     display: block;  
      10. 
  
  
  
  
    10. }  
      11.

    期望結(jié)果：

    IE的結(jié)果：

    還好，你可以用下面的方法來解決

    解決方法一

    定義height來解決

     
 
 
 
      
  
  
  
  
    1. li a {  
      2. 
  
  
  
  
    2.     background: #95CFEF;  
      3. 
  
  
  
  
    3.     display: block;  
      4. 
  
  
  
  
    4.         height: 200px;  
      5. 
  
  
  
  
    5. }  
      6.

    解決方法二

       
 
 
 
      
    
  
  
  
    1. li a {  
      2. 
    
  
  
  
    2.     background: #95CFEF;  
      3. 
    
  
  
  
    3.     float: left;  
      4. 
    
  
  
  
    4.         clear: left;  
      5. 
    
  
  
  
    5. }  
      6.

    解決方法三

    為 li 加上display: inline。

      
 
 
 
      
   
  
  
  
    1. li {  
      2. 
   
  
  
  
    2.     display: inline;  
      3. 
   
  
  
  
    3. }  
      4.

    結(jié)論

    調(diào)界面是一件很難的事，調(diào)一個CSS的HTML界面是一件更難的事，在IE下調(diào)一個CSS的HTML界面是難上加難的事。


    分享標題：為Web程序員解毒：9個IE常見Bug的解決方案
    文章出自：http://www.dlmjj.cn/article/dhigijp.html