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

IE6中常見CSS兼容性解決十大技巧

開發(fā) 前端
IE6中CSS兼容性是個比較棘手的問題,這里向大家介紹10種在IE6瀏覽器中常見的CSS兼容性問題,以及相關(guān)的解決方法。

你對 IE6中CSS兼容性問題是否了解,IE6中CSS兼容性是個比較棘手的問題,這里和大家分享一下解決技巧,希望對你的學習有所幫助。

  IE6中常見CSS兼容性解決技巧

  1、使用一個聲明

  你必須經(jīng)常在HTML網(wǎng)頁頭部放置一個聲明,推薦使用嚴格的標準。同時需要是IE6進入兼容模式,這已經(jīng)足夠兼容的了。

  2、使用position:relative

  設(shè)置一個標簽position:relative可以解決很多問題,特別是曾經(jīng)有過看不見的經(jīng)歷或者奇怪布局的框架。明顯的,你需要小心,絕對位置放置的子元素是否都參照找到新位置。

  3、為浮動元素使用display:inline

  浮動元素會有一個著名的IE6雙邊距marginbug。假如你設(shè)置了左邊距5px但實際上得到了10px左邊距。display:inline可以解決這個問題,盡管它不是必需的,但是CSS仍然有效。

  4、設(shè)置元素啟動hasLayout

  大部分IE6(IE7)的渲染問題都可以通過起來元素的hasLayout屬性來兼容。這是IE內(nèi)置的設(shè)定,確定一個內(nèi)容塊相對其它內(nèi)容塊是有界限和位置的。當你需要設(shè)置一個行內(nèi)元素例如一個連接變成塊狀元素或者是透明效果,設(shè)置hasLayout也是必須的。

  5、修復(fù)重復(fù)字符的bug

  復(fù)雜的布局會觸發(fā)一個bug:浮動對象的***字符會出現(xiàn)在已經(jīng)清除浮動的元素后面。這里有幾種解決的辦法,部分是理想的,并且一些測試和出錯是必須的。

  ◆確保浮動元素都使用:display:inline;

  ◆***一個浮動元素使用margin-right:-3px;

  ◆在浮動對象***一個元素后使用一個條件注釋。例如這里輸入注釋…

  ◆在容器內(nèi)的***使用一個div空標簽(它也必須設(shè)置90%寬度甚至更小)。

  6、使用a標簽完成可點擊和hover原理

  IE6只支持a標簽的CSS定義hover效果,你可以使用它去控制javascript啟動的widgets,使得他們?nèi)匀槐3宙I盤操作。這里有個二擇一的問題,但是a標簽是所有解決方案中最可靠的。IE6不支持“min-height”并且錯誤的將20em重寫為“auto”。不過,當內(nèi)容大于設(shè)置的空間時,它會增加它的尺寸。另外一個選擇是使用高級選擇符。例如:

以下是代碼片段: 

  1. #element{min-height:20em;height:20em;}  
  2. /*ignoredbyIE6*/#element[id]{height:auto;}  

  7、使用!important,或是高級選擇符替代IE特定代碼

  在外置的CSS文件里,放棄憑借傳統(tǒng)的hacks和條件判斷,使用有效的CSS代碼去針對IE6仍然是有可能的。例如:最小高度可以使用一下定義。 

  1.  #element{min-height:20em;height:auto!important;
  2. /*understoodbyallbrowsers*  
  3. /height:20em;/*IE6incorrectlyusesthisvalue/*}  
  4.  

  8、避免百分比定義

  百分比在IE下比較混亂。除非你非常小心每個父元素的尺寸,這樣就大概可以***避免了。你仍然可以對其他瀏覽器使用!important來使用百分值。例如:  

  1. body{margin:2%0!important;margin:20px0;/*IE6only*/}  
  2.  

  9、早點和經(jīng)常測試

  在你的網(wǎng)站和應(yīng)用程序完成之前,不要放棄IE6的測試。問題將會更加嚴重并且需要很長時間去修復(fù)。如果你的網(wǎng)站可以運行于FireFox和IE6,它將差不多肯定可以在其它瀏覽器下運行。

  10、重構(gòu)你的代碼

  經(jīng)常的,修復(fù)會比重新考慮布局問題更加花費時間。Html細微的修改和更加簡單的CSS經(jīng)常是最有效的。這意味著你要放棄***的合法的代碼,但是將會更少的問題出現(xiàn),并且你知道怎樣處理將要出現(xiàn)的情況。

【編輯推薦】

  1. IE6雙倍margin間距解決方法
  2. IE6.0對padding的解讀分析
  3. CSS 尺寸屬性用法解讀
  4. IE6 IE7 IE8三大瀏覽器的CSS兼容速查表
  5. CSS中cellspacing和cellpadding屬性用法揭秘

 

責任編輯:佚名 來源: ctocio.com.cn
相關(guān)推薦

2010-08-18 13:13:04

CSS兼容性IE6

2010-08-11 14:32:51

IE6CSS

2010-09-16 10:50:55

CSS兼容IE6

2010-08-18 09:14:58

IE6兼容性

2010-08-18 09:24:09

IE6兼容性

2010-08-30 09:35:35

IE6IE7Firefox

2010-08-20 11:01:10

IE7IE8CSS

2010-09-16 13:33:47

IE6IE7IE8

2010-09-06 15:06:29

IE6IE7Firefox

2010-08-19 16:06:15

2010-08-18 13:54:35

IE6IE7Firefox兼容

2010-09-15 11:18:27

IE6IE7火狐

2010-09-15 10:19:12

IE6IE7IE8

2010-08-18 14:54:32

IE6IE7Firefox

2010-08-20 09:25:11

IE6IE7IE8

2010-08-17 15:07:48

IE6IE7IE8

2010-08-27 15:08:10

FirefoxIE6IE7

2010-08-18 13:27:15

CSS兼容IE6

2010-08-20 13:15:54

IE6IE7IE8

2010-09-15 10:25:18

IE7IE8CSS兼容性
點贊
收藏

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