自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

為Web程序員解毒：9個(gè)IE常見(jiàn)Bug的解決方案

作者：耗子
開(kāi)發(fā) 前端
Web程序員及設(shè)計(jì)師往往為了其CSS在IE下表現(xiàn)怪異而痛苦不已，而IE則因此被公認(rèn)為Web程序員的毒藥。本文總結(jié)了9個(gè)IE上最常見(jiàn)的Bug，以及它們的解決方案。

本文來(lái)自酷殼coolshell.cn的《9個(gè)最常見(jiàn)IE的Bug及其fix》一文，改動(dòng)了部分筆誤。

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

1. 居中布局

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

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

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

Tutorial Image

但I(xiàn)E卻給我們這樣的輸出：

Tutorial Image

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

解決方法

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

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

2. 樓梯式的效果

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

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

 一個(gè)符合標(biāo)準(zhǔn)的瀏覽器會(huì)是下面這樣：

Tutorial Image

但I(xiàn)E卻是這樣的：

Tutorial Image

下面是兩個(gè)解決方法

解決方法一

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

  1. ul li { float: left; }  

解決方法二

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

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

3. float元件的兩倍空白

請(qǐng)看下面的代碼：

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

期望的結(jié)果是：

Tutorial Image

IE的結(jié)果是：

Tutorial Image

解決方案

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

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

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

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

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

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

Tutorial Image

IE的結(jié)果：

Tutorial Image

解決方案一

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

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

解決方案二

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

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

5. 跨出邊界

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

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

期望的結(jié)果：

Tutorial Image

IE的結(jié)果：

Tutorial Image

解決方法

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

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

6. Fixing the Broken Box Model

Internet Explorer曲解了“盒子模子”可能是最不可原諒的事情了。IE 6 這個(gè)半標(biāo)準(zhǔn)的瀏覽器回避了這個(gè)事情，但這個(gè)問(wèn)題還是會(huì)因?yàn)镮E運(yùn)行在“怪異模式”下出現(xiàn)。

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

Tutorial Image

解決方法

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

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

上面的定義也就是說(shuō)：

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

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

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

IE忽略了min-height。

解決方法一

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

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

解決方法二

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

8. Float 布局錯(cuò)誤行為 Misbehaving

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

來(lái)看一下下面這個(gè)示例：

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

期望結(jié)果：

Tutorial Image

IE的結(jié)果：

Tutorial Image

你可以看到其中的不同了

解決方法

要解決這個(gè)問(wèn)題沒(méi)有什么好的方法。只有一個(gè)方法，那就是使用 overflow: hidden 。

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

9. 在list項(xiàng)目門(mén)的空行

先看下面的例子

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

期望結(jié)果：

Tutorial Image

IE的結(jié)果：

Tutorial Image

還好，你可以用下面的方法來(lái)解決

解決方法一

定義height來(lái)解決

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

解決方法二

  1. li a {  
  2.     background: #95CFEF;  
  3.     float: left;  
  4.         clear: left;  
  5. }  
解決方法三

為 li 加上display: inline。

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

結(jié)論

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

責(zé)任編輯：yangsai 來(lái)源： 酷殼
IECSSbug
相關(guān)推薦

2015-08-24 10:07:13

程序員bug

2016-02-26 15:25:45

程序員Bug反應(yīng)

2015-08-12 14:39:47

程序員問(wèn)題

2010-02-23 14:56:18

WCF Bug

2010-11-22 13:28:55

2010-08-30 16:53:14

FirefoxIE8margin-top

2015-11-23 09:27:39

程序員不良編程習(xí)慣

2015-06-03 11:15:20

程序員真相

2010-09-01 14:51:12

CSSIEFirefox

2017-12-06 10:28:37

程序員編程習(xí)慣

2012-01-16 09:50:41

2018-07-02 09:33:15

前端VueIE9

2023-05-06 15:32:04

2015-02-02 10:13:43

程序員

2015-02-05 13:51:25

程序員

2015-06-29 09:44:55

2014-02-18 13:45:39

bug程序員

2013-08-21 14:11:31

2012-07-03 11:18:40

程序員社交網(wǎng)站

2016-03-13 17:35:18

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)