麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 課堂 > 瀏覽器 > 正文

IE瀏覽器兼容問題的幾點寫法分享

2020-03-24 18:07:30
字體:
來源:轉載
供稿:網友
用戶使用的瀏覽器五花八門,我們要保證每一種瀏覽器都能兼容我們的代碼,不能要求用戶去改變瀏覽器,那么就得在我們的代碼上下功夫。此時我們要用到hack。

HACK就是針對不同的瀏覽器寫不同的HTML、CSSyangshi_10628_1.html' target='_blank'>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 >
單獨寫給IE6的解決兼容問題的HTML代碼: !--[if IE 6]  script src= js/iepng.js?1.1.11 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;}

用一行代碼來解決CSS在,IE6,IE7,IE8,IE9,IE10 中的各種兼容性問題。

在網站前端寫代碼的過程中,很多時間IE各個版本的兼容問題很難整。現在百度與谷歌都有了一行解決這種兼容性的代碼了。如下面的。

辦法一

百度也應用了這種方案去解決IE的兼容問題

百度源代碼如下

1 !Doctype html

2 htmlxmlns=http://www.w3.org/1999/xhtmlxmlns:bd=http://www.baidu.com/2010/xbdml

3 head

4 metahttp-equiv=Content-Typecontent=“text/html;charset=utf-8″

5 metahttp-equiv=X-UA-Compatiblecontent=IE=EmulateIE7

6 title 百度一下,你就知道 /title

7 script varwpo={start:newDate*1,pid:109,page:‘superpage’} /script

meta http-equiv=X-UA-Compatible content=IE=EmulateIE7

可以打開百度,右鍵查看源碼看下!我們可以看下文件頭是否存在這樣一行代碼!

這句話的意思是強制使用IE7模式來解析網頁代碼!

在這里送上幾種IE使用模式!

8 metahttp-equiv=“X-UA-Compatible”content=“IE=8″

2. Google Chrome Frame也可以讓IE用上Chrome的引擎:

9 metahttp-equiv=“X-UA-Compatible”content=“chrome=1″/

3.強制IE8使用IE7模式來解析

10 metahttp-equiv=“X-UA-Compatible”content=“IE=EmulateIE7″ !– IE7 mode –

11 //或者

12 metahttp-equiv=“X-UA-Compatible”content=“IE=7″ !– IE7 mode –

4.強制IE8使用IE6或IE5模式來解析

13 metahttp-equiv=“X-UA-Compatible”content=“IE=6″ !– IE6 mode –

14 metahttp-equiv=“X-UA-Compatible”content=“IE=5″ !– IE5 mode –

5.如果一個特定版本的IE支持所要求的兼容性模式多于一種,如:

15 metahttp-equiv=“X-UA-Compatible”content=“IE=5; IE=8″/

以上就是IE瀏覽器兼容問題的幾點寫法分享的詳細內容,html教程

鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表

圖片精選

主站蜘蛛池模板: 国产九色视频在线观看 | 一级毛片免费在线 | 亚洲综合色视频在线观看 | 国产精品一区二区三区在线播放 | 一级做a爱片性色毛片 | 美女网站黄在线观看 | 成人一区二区在线观看视频 | 国产免费传媒av片在线 | 在线观看中文字幕av | 日韩精品a在线观看 | 日本成人高清视频 | 日本娇小videos高潮 | 爱爱视频天天干 | 性看小视频 | 少妇一级淫片免费放播放 | 中国av免费在线观看 | 精品xxxx户外露出视频 | 在线a亚洲视频播放在线观看 | 性生活视频一级 | 色戒在线版| 在线小视频国产 | xxxx18韩国护士hd老师 | 久国产精品视频 | 一级做受毛片免费大片 | 色成人在线 | 亚洲第五色综合网 | 亚洲小视频在线 | 欧美成人免费小视频 | 欧美国产成人在线 | 国产一区亚洲 | 亚洲国产高清一区 | 91av在线免费视频 | 精品一区二区三区免费 | 日日操夜夜透 | 日韩.www | 欧美一区二区三区中文字幕 | 日韩精品羞羞答答 | 黄色成人av在线 | 国产在线精品区 | 成人在线免费观看网址 | 精品小视频 |