使用者使用的瀏覽器五花八門,我們要保證每一種瀏覽器都能相容我們的**,不能要求使用者去改變瀏覽器,那麼就得在我們的**上下功夫。此時我們要用到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(大於等於)
只要記住這乙個模板就知道html的相容怎麼寫了,下面我們列舉幾個:
單獨寫給ie6的解決相容問題的html**:(二)、css的hack
css的hack包括:屬性的hack和選擇器的hack
設定css的hack要注意的是css樣式的層疊性,給同乙個元素設定的相容寫法必須寫在後面,否則會被層疊掉。
(1)屬性的hack
①只相容ie6的hack
hack符:-或_,當做字首寫在屬性前面,中間不加空格
在屬性名前面加短橫-或者下劃線_(原理:高階瀏覽器及其他瀏覽器會認為這個字首符號是乙個unknown property name),未知的屬性名,不會報錯,不予載入。
例:
background:red; //高階瀏覽器識別②相容ie6、7的hack_background:pink; //僅ie6識別
hack符: ` ~ ! @ # $ % ^ & * ( ) + = [ ] | < > , . 中的任一字元,作為字首寫在屬性前面
例:
background:red; //③只相容ie8的hack高階瀏覽器識別
!background:pink; //
僅ie6、7識別
hack符:\0/,必須寫在屬性值與分號之間,中間不加空格
background:red; //④相容ie8、9、10的hack高階瀏覽器識別
background:pink\0/; //
僅ie8識別
hack符:\0,必須寫在屬性值與分號之間,中間不加空格
background:red; //⑤相容ie6、7、8、9、10高階瀏覽器識別
background:pink\0; //
ie8、9、10識別
hack符:\9,必須寫在屬性值與分號之間,中間不加空格
(2)選擇器的hack
給選擇器新增hack,這個選擇器中的樣式都是ie相容樣式,其他高階瀏覽器不識別,同理給同乙個選擇器設定的相容樣式要寫在高階瀏覽器可識別的常規樣式後面,否則會被層疊
①ie6及以下版本的hack
hack符:* html,*和html之間有空格,再加乙個空格,後面寫選擇器
例:
.box②ie7及以下版本的hack* html .box
hack符:,英文逗號,寫在選擇器後面,不加空格
例:
.box,④相容ie6、7以外的版本的hack
hack符:html>/**/或html~/**/,寫在選擇器前面,與選擇器之間有乙個空格隔開
例:
html>/**/body .box
html相容ie瀏覽器的寫法
doctype html html lang zh cn head meta charset utf 8 title title head body body html 這個其實有好幾種不同的版本,按個人的需求來定吧,本人在不同階段也使用了不同的版本,最終確認為這個版本。其中.no css3用來表示...
ie瀏覽器相容筆記
ie低版本瀏覽器預設很多標籤是自帶樣式的。ul預設室友padding left 40px li標籤的預設樣式是跟其他瀏覽器不一樣的。預設帶有左邊距16px左右,設定屬性如下即可解決list style position outside position後記得在relative屬性的元素設定浮層 z ...
ie瀏覽器相容筆記
某某 經理讓你相容ie瀏覽器 我的內心 1.html 寫法不標準。有的html 不夠嚴謹,就會造成在ie瀏覽器下各種的問題。比如標題,最好不要直接用li標籤,最好外面有個div包裹,li列表外面需要有ul標籤包裹。應該載入一段公共css 去除某些樣式的預設初始屬性。body,div,dl,dt,dd...