常見的瀏覽器Hack技巧整理
常見的瀏覽器Hack技巧整理
如果你經(jīng)常需要做前端頁面，那么你一定多多少少需要解決頁面的瀏覽器兼容問題。而瀏覽器兼容問題大部分也集中在對(duì)IE系列的兼容。這里就總結(jié)一下對(duì)IE系列的CSS Hack，記錄一下，方便以后查閱。
IE Hack
IE系列瀏覽器的hack大略如下：
- _nowamagic:1px;-----------ie6
- *nowamagic:1px;-----------ie7
- nowamagic:1px\0;----------ie89
- nowamagic:1px\9\0;--------ie9
- :root nowamagic:1px; ----ie9(實(shí)際情況可能ie9還是有問題，再用這種方式)
這樣就基本上就可以兼容所有IE。
其中粉紅色部分為屬性hack，黃色部分為選擇器hack，它們可以結(jié)合使用。此外Firefox和Chrome也有它們專有的hack，詳細(xì)hack方式及使用示例如下：
Firefox 與 Chrome 的 Hack
Firefox：
@-moz-document url-prefix() /*寫在選擇器外層時(shí)（只可寫在此處）：Firefox only*/
Chrome：
@media screen and (-webkit-min-device-pixel-ratio:0) /*寫在選擇器外層時(shí)（只可寫在此處）：Chrome only*/
使用示例：
@-moz-document url-prefix() /*Firefox*/
{
body
{
background-color:pink;
}
}
瀏覽器對(duì)css的解析是從前到后的，并且采用最后一個(gè)樣式聲明。
CSS 實(shí)例
.color{
background-color: #CC00FF; /*所有瀏覽器都會(huì)顯示為紫色*/
background-color: #FF0000\9; /*IE6、IE7、IE8會(huì)顯示紅色*/
*background-color: #0066FF; /*IE6、IE7會(huì)變?yōu)樗{(lán)色*/
_background-color: #009933; /*IE6會(huì)變?yōu)榫G色*/
}
background: red; /* 對(duì)FF Opera和Safari有效 */ #background: blue; /* 對(duì) IE6 和 IE7有效 */ _background: green; /* 只對(duì)IE6有效 */ /*/background: orange;*/ /** 只對(duì)IE8有效 **/ !important /*FF、IE7有效*/ * /*IE都有效*/
IE8是可以和IE7兼容的，簡單一行代碼，讓IE8自動(dòng)調(diào)用IE7的渲染模式。只需要在頁面中加入如下HTTP meta-tag:<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，只要IE8讀到這個(gè)標(biāo)簽，它就會(huì)自動(dòng)啟動(dòng)IE7兼容模式，保證頁面完整展示。
混用起來大約是這樣：
:root .demo {
background:#963\9; /* 僅IE9適用 */
}
.demo {
width: 300px;
height: 200px;
background: #036; /* 所有瀏覽器都適用 */
background: #09F\9; /* IE6~IE9 */
background: #09F\0; /* IE8~IE9 */
background: #09F\0/; /* IE8 */
*background: #F60; /* IE6/IE7 */
+background: #F60; /* IE6/IE7 */
@background: #F60; /* IE6/IE7 */
>background: #F60; /* IE6/IE7 */
_background: #ccc; /* IE6 */
}
@media all and (min-width:0) {
.demo {
background: #F06; /* webkit and opera */
}
}
@media screen and (-webkit-min-device-pixel-ratio:0){
.demo {background:#609;}/*webkit (& Opera9.2)*/
}
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
這篇文章主要介紹了簡單了解JS打開url的方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
小程序雙頭slider選擇器的實(shí)現(xiàn)示例
這篇文章主要介紹了小程序雙頭slider選擇器的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
相信使用過jQuery的朋友都知道index()方法, 她可以很方便的幫你找到當(dāng)前元素在元素集合中索引位置. 那么, 原生JavaScript中如何獲取呢?2010-09-09
JS實(shí)現(xiàn)鼠標(biāo)滑過折疊與展開菜單效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)滑過折疊與展開菜單效果代碼,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)改變頁面元素樣式的相關(guān)實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
ES6使用export和import實(shí)現(xiàn)模塊化的方法
這篇文章主要介紹了ES6使用export和import實(shí)現(xiàn)模塊化的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
詳解JavaScript中l(wèi)ocalStorage使用要點(diǎn)
localStorage主要用來替代cookie，解決cookie(可參考cookie使用要點(diǎn))讀寫困難、容量有限的問題，對(duì)js localstorage的使用相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
php 解壓zip壓縮包內(nèi)容到指定目錄的實(shí)例
下面小編就為大家分享一篇php 解壓zip壓縮包內(nèi)容到指定目錄的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
JS實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證功能完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證功能,結(jié)合完整實(shí)例形式分析了JS滑動(dòng)拼圖驗(yàn)證相關(guān)原理、實(shí)現(xiàn)步驟與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
JavaScript對(duì)象數(shù)組排序?qū)嵗椒\析
這篇文章主要介紹了JavaScript對(duì)象數(shù)組排序?qū)嵗椒\析的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
JavaScript?中的類（Class）是一種新的語言特性，它讓我們可以使用面向?qū)ο缶幊痰乃枷雭砀臃奖愕亟M織和管理代碼。在本文中，我們將詳細(xì)介紹?JavaScript?中的類特性，感興趣的同學(xué)可以借鑒閱讀2023-05-05