首頁 » 技術文章 » 解決IE6兼容性問題的十一大技巧

解決IE6兼容性問題的十一大技巧

時間: 2014-04-02 閱讀: 13,094 次 評地方論: 0 條
標簽: , ,

IE6是微軟一款經典的瀏覽器,和XP系統一樣一個永恒的經典,但是由于被微軟拋棄了,微軟為了推廣新系統,放棄了IE6的升級,包括安全性以及網頁代碼的兼容性都無法更新了,但是我們在編寫代碼的時候,但是還是有一些人在用IE6瀏覽器,為了提高用戶體驗,我們有時候就必須考慮一下ie6這個古董級的瀏覽器的界面兼容問題。

 

說要10要點解決IE6兼容性問題

1、使用聲明

你必須經常在html網頁頭部放置一個聲明,推薦使用嚴格的標準。例如

<!DOCTYPEHTMLPUBLIC“-//W3C//DTDHTML4.01//EN” ??"http://www.w3.org/TR/html4/strict.dtd”>?or,forXHTML: ?<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Strict//EN” ??"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

最后你需要是IE6進入兼容模式,這已經足夠兼容了。

2、使用position:relative

IE6兼容性問題解決方案二:使用position:relative。設置一個標簽position:relative可以解決很多問題,特別是曾經有過看不見的經歷或者奇怪布局的框架。明顯的,你需要小心,絕對位置放置的子元素是否都參照找到新位置。

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

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

4、設置元素啟動hasLayout

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

5、修復重復字符的bug

復雜的布局會觸發一個bug:浮動對象的最后字符會出現在已經清除浮動的元素后面。這里有幾種解決的辦法,部分是理想的,并且一些測試和出錯是必須的。
a、確保浮動元素都使用:display:inline;
b、最后一個浮動元素使用margin-right:-3px;
c、在浮動對象最后一個元素后使用一個條件注釋。例如<!—>這里輸入注釋…<![endif]
d、在容器內的最后使用一個div空標簽(它也必須設置90%寬度甚至更小)

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

IE6只支持a標簽的css定義hover效果
你可以使用它去控制javascript啟動的widgets,使得他們仍然保持鍵盤操作。這里有個二擇一的問題,但是a標簽是所有解決方案中最可靠的。

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

IE6兼容性問題解決方案七;:使用!important。在外置的css文件里,放棄憑借傳統的hacks和條件判斷,使用有效的css代碼去針對IE6仍然是有可能的。例如:最小高度可以使用一下定義。(在IE6中無法識別!important優先級別標簽,所以一般用法為:{margin-top:20px !important; margin-top:0px;})

#element{ ?min-height:20em; ?height:auto!important; ?height:20em; ?}

9、早點和經常測試

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

10、重構你的代碼

IE6兼容性問題解決方案十:重構代碼。經常的,修復會比重新考慮布局問題更加花費時間。Html細微的修改和更加簡單的css經常是最有效的。這意味著你要放棄完美的合法的代碼,但是將會更少的問題出現,并且你知道怎樣處理將要出現的情況。

#element[id]{ ?height:auto; ?}

注意事項

*margin-top:10px; 屬性前加“*”,這個只有IE6/IE7才能識別。

例如:

div{????margin-top:10px; *margin-top:0px;}

“*”或“+”或“_” + 屬性,這個只有IE6和IE7才支持此種標簽。

*margin-top:10px \9; 屬性值的后面加“\9”,這個只有IE才能識別。以上兩種方法結合起來可以區分IE6、IE7、IE8+、非IE內核瀏覽器。

————————————————————————————————————————————————————————

代碼部分試了下語法著色,貌似有點亂了,這里是英文原文的鏈接:http://www.sitepoint.com/blogs/2009/03/06/10-fixes-for-IE6-problems/

作者:行客工作室         如文章內容侵權:請發郵件到 [email protected] 反饋
簡介:本網站成立于2011年,分享各種優化軟件、視頻教程、電影電視劇下載。
宗旨:一個興趣愛好而做的博客網站,所以分享的各種軟件、電影絕對沒有病毒。


  • xunleifan1

    迅雷任務包含違規內容,無法繼續下載的解決辦法

  • ie6圖標

    解決IE6兼容性問題的十一大技巧

  • dianlv

    電驢和電騾有什么區別

  • 谷歌打不開的解決辦法

  • wws

    不用U盤和光盤,直接安裝微軟原版windows系統的圖解教程

  • illustratorcs4.png

    Illustrator使用技巧

  • office

    Office 2016激活工具 無法激活的解決辦法問題

  • office 365 logo

    提示office已經永久激活 或者當前版本不支持KMS激活的解決辦法

  • qq空間 logo

    怎樣關閉qq空間

  • Microsoft-Office-2016

    office 2016/2010/2013已經激活了,卻還彈出激活提示框的解決辦法

提示:本網站不需要注冊、也不需要登錄,直接可以發表評論。

電子郵件地址不會被公開。




您可以使用這些 HTML 標簽和屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

(Spamcheck Enabled)

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 

暫時沒有評論!

重庆幸运农场水果图