IE瀏覽器兼容問題(上)——html和css的兼容寫法


相關鏈接:http://www.cnblogs.com/wenhandi/p/7772358.html

用戶使用的瀏覽器五花八門,我們要保證每一種瀏覽器都能兼容我們的代碼,不能要求用戶去改變瀏覽器,那么就得在我們的代碼上下功夫。此時我們要用到hack。

HACK就是針對不同的瀏覽器寫不同的HTML、CSS樣式,從而使各種瀏覽器達到一致的渲染效果。

下面我們就分別了解一下HTML的hack和CSS的hack。

(一)、HTML的hack

HTML的hack由注釋<!--  -->演變而來,在高級瀏覽器中注釋不會被加載,把IE瀏覽器的兼容代碼寫在注釋中,IE瀏覽器會識別。

HTML的hack代碼模板:

注:

①用於寫兼容的注釋,標簽內首位都要加!感嘆號。

②單詞都寫在一對中括號中

③IE和版本號之間要加空格

④不加比較單詞,表示只兼容這一個版本;

比較單詞:lt=less than(小於)、lte=less than or equal (小於等於)、gt=great than(大於)、gte=great than or equal(大於等於)

<!--[if IE 6]>
    <p>只有IE6認識我</p>
<![endif]-->

只要記住這一個模板就知道HTML的兼容怎么寫了,下面我們列舉幾個:

<!--[if gte IE 9]>
       <h1>大於等於IE9的瀏覽器能看到</h1>
<![endif]-->
<!--[if lte IE 8]>
       <h1 class="red">您的瀏覽器版本過低,IE8及以下版本不支持新樣式,請更新瀏覽器</h1>
<![endif]-->
復制代碼
單獨寫給IE6的解決兼容問題的HTML代碼:
<!--[if IE 6]>
     <script src="js/iepng.js" type="text/javascript"></script>
     <script type="text/javascript">
       EvPNG.fix('div,ul,img,li,input,span,b,h1,h2,h3,h4');
     </script>
<![endif]-->
復制代碼

 

(二)、CSS的hack

CSS的hack包括:屬性的hack和選擇器的hack

設置css的hack要注意的是css樣式的層疊性,給同一個元素設置的兼容寫法必須寫在后面,否則會被層疊掉。

(1)屬性的hack

①只兼容IE6的hack

hack符:-或_,當做前綴寫在屬性前面,中間不加空格

在屬性名前面加短橫-或者下划線_(原理:高級瀏覽器及其他瀏覽器會認為這個前綴符號是一個unknown property name),未知的屬性名,不會報錯,不予加載。

例:

background:red;    //高級瀏覽器識別
_background:pink;    //僅IE6識別

 

②兼容IE6、7的hack

 hack符: ` ~ ! @ # $ % ^ & * ( ) + = [ ] | < > , . 中的任一字符,作為前綴寫在屬性前面

例:

background:red;    //高級瀏覽器識別
!background:pink;    //僅IE6、7識別

 

③只兼容IE8的hack

hack符:\0/,必須寫在屬性值與分號之間,中間不加空格

background:red;    //高級瀏覽器識別
background:pink\0/;    //僅IE8識別

 

④兼容IE8、9、10的hack

hack符:\0,必須寫在屬性值與分號之間,中間不加空格

background:red;    //高級瀏覽器識別
background:pink\0;    //IE8、9、10識別

 

⑤兼容IE6、7、8、9、10

hack符:\9,必須寫在屬性值與分號之間,中間不加空格

 

(2)選擇器的hack

給選擇器添加hack,這個選擇器中的樣式都是IE兼容樣式,其他高級瀏覽器不識別,同理給同一個選擇器設置的兼容樣式要寫在高級瀏覽器可識別的常規樣式后面,否則會被層疊

①IE6及以下版本的hack

hack符:* html,*和html之間有空格,再加一個空格,后面寫選擇器

例:

復制代碼
<!--常規寫法-->
.box{ width: 200px; height: 200px; border-radius: 50%; background: yellowgreen; }
<!--兼容寫法--> * html .box{ width: 100px; height: 100px; background: skyblue; }
復制代碼

 

②IE7及以下版本的hack

hack符:,英文逗號,寫在選擇器后面,不加空格

例:

.box,{
    background: #999;
    border: 10px solid red;

 

③兼容IE6以外的其他版本的hack

hack符:html>body,寫在選擇器前面,與選擇器之間有一個空格隔開

例:

html>body .box{
    background: yellow;
}

 

④兼容IE6、7以外的版本的hack

hack符:html>/**/或html~/**/,寫在選擇器前面,與選擇器之間有一個空格隔開

例:

html>/**/body .box{
    background: purple;
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM