\9和\0可能hack IE11\IE9\IE8無效原因詳解
每次设计一张网页或一个表单，都被各种浏览器的兼容问题伤透脑筋，尤其是IE家族。在做兼容性设计时，我们往往会使用各种浏览器能识别的独特语法进行hack，从而达到各种浏览器下显示正常的目的。其中，我们用得最多莫属于\9和\0了。\9和\0是hack IE8、IE9、IE11的独特标识。但是问题来了，\9和\0到底怎样hack IE8、IE9、IE11这三个浏览器？这个问题一直困扰我很久，不过，今天我终于搞明白了，也独创了一个能hack IE8、IE9、IE11这三个浏览器的代码写法模式，本文将与各位分享。
\9和\0为什么可能hack IE11\IE9\IE8无效？
可能很多人都略明白，\0是用来hack IE8、IE9、IE11的，而\9是用来hack IE9的。但有时你真正运用起来，它并不凑效。看下面的html代码：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#ccc;
background-color:#FF0000; /* 红色 */
background-color:#0000FF\0; /* 蓝色 */
background-color:#FFFF00\9; /* 黄色 */
}
</style>
</head>
<body>
<div class="content">IE8 IE9 IE11均显示黄色</div>
</body>
</html>上例中，\9和\0就达不到hack 各IE浏览器版本的目的。不过我们把 /* 蓝色 */ 和 /* 黄色 */ 这两行调换，又会怎样显示呢？请看html代码：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#ccc;
background-color:#FF0000; /* 红色 */
background-color:#FFFF00\9; /* 黄色 */
background-color:#0000FF\0; /* 蓝色 */
}
</style>
</head>
<body>
<div class="content">IE11显示黄色，IE8 IE9 均显示蓝色</div>
</body>
</html>结果是，IE11显示黄色，而IE8和IE9均显示蓝色。
上述两个例子说明，IE8、IE9都能读懂\9和\0标识，此两标识哪个写在后面就以哪个为准，而IE11仅能读懂\9标识。
至此，我们能否根据上述结论来写代码来hack IE8、IE9和IE11三个浏览器？显然是不可以的，至少你不可以hackIE8和IE9，仅能hackIE11。
如何hack IE8和IE9
那么，我们如何去hack IE8和IE9呢？这个就是问题的关键。
在此文 css区分ie8/ie9/ie10/ie11 chrome firefox的代码 中提到，IE9以上浏览器可以读懂此代码：
/* IE9+ */
@media all and (min-width:0) {
.divContent{
background-color:#eee;
}
}我们用此代码结合前面的代码，是不是就可以hack IE8和IE11了？完整html代码如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#ccc;
background-color:#FF0000; /* 红色 */
background-color:#FFFF00\9; /* 黄色 */
background-color:#0000FF\0; /* 蓝色 */
}
/* IE9+ */
@media all and (min-width:0) {
.content{
background-color:#000; /* 黑色 */
}
}
</style>
</head>
<body>
<div class="content">IE11显示黄色，IE8 显示蓝色，IE9显示黑色。</div>
</body>
</html>至此，IE8、IE9、IE11的兼容性问题就解决了。
不过，还没玩，因为 @media all and (min-width:0) 在 Chrome、Firefox、360等浏览器同样有效。所以，上面代码需要稍微修改下，在 @media all and (min-width:0) {} 里面的css语句同样加上\0标识，表示这是属于IE9的样式。修改后的完整代码如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#ccc;
background-color:#FF0000; /* 红色 */
background-color:#FFFF00\9; /* 黄色 */
background-color:#0000FF\0; /* 蓝色 */
}
/* IE9+ */
@media all and (min-width:0) {
.content{
background-color:#000\0; /* 黑色 */
}
}
</style>
</head>
<body>
<div class="content">IE11显示黄色，IE8 显示蓝色，IE9显示黑色。</div>
</body>
</html>至此，IE8、IE9、IE11的兼容性问题就完美解决了。
meta声明属性 IE=Edeg 后，IE8\IE9\IE11的兼容代码
但是，如果网页HTML代码里声明了Meta元件 IE=Edge，那么上面的代码是不对的。
先看第一个html代码：
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#ccc;
background-color:#FF0000; /* 红色 */
background-color:#0000FF\0; /* 蓝色 */
background-color:#FFFF00\9; /* 黄色 */
}
</style>
</head>
<body>
<div class="content">IE11显示蓝色，IE8 IE9均显示黄色</div>
</body>
</html>结果是，IE11显示蓝色，IE8 IE9均显示黄色，并非三个浏览器都显示黄色了。
这就说明，加了meta IE=Edge 这句，IE11不再能读\9这个标识。
我们再看如下代码：
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#ccc;
background-color:#FF0000; /* 红色 */
background-color:#FFFF00\9; /* 黄色 */
background-color:#0000FF\0; /* 蓝色 */
}
</style>
</head>
<body>
<div class="content">IE8 IE9 IE11 均显示蓝色</div>
</body>
</html>execcodegetcode
结果是，IE8 IE9 IE11 均显示蓝色，这说明了，IE8 IE9 IE11 均能读懂\0这个标识。
结合上面两个例子，可以得出结论，加了meta IE=Edge 属性后，IE8 IE9能同时读懂\9和\0这两个标识，而IE11仅能读懂\0这个标识。
所以，我们可以据此来hack出IE11。如下html代码加以说明：
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#ccc;
background-color:#FF0000; /* 红色 */
background-color:#0000FF\0; /* 蓝色 这个是给IE11的 */
background-color:#FFFF00\9; /* 黄色 这个是给IE8和IE9的 */
}
</style>
</head>
<body>
<div class="content">IE11显示蓝色，IE8 IE9均显示黄色</div>
</body>
</html>这样，我们再用上面的代码hack出IE8和IE9就可以了。
如何hack IE8和IE9 ？还是前面那个hack IE8 IE9的关键代码：
@media all and (min-width:0) {}
完整html代码这样写：
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#ccc;
background-color:#FF0000; /* 红色 */
background-color:#0000FF\0; /* 蓝色 这个是给IE11的 */
background-color:#FFFF00\9; /* 黄色 这个是给IE8和IE9的 */
}
/* IE9+ */
@media all and (min-width:0) {
.content{
background-color:#000\9; /* 黑色 这个是给IE9的 */
}
}
</style>
</head>
<body>
<div class="content">IE11显示蓝色，IE8显示黄色，IE9显示黑色</div>
</body>
</html>以上是\9和\0可能hack IE11\IE9\IE8無效原因詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
h5項目怎麼運行
Apr 06, 2025 pm 12:21 PM
運行 H5 項目需要以下步驟：安裝 Web 服務器、Node.js、開發工具等必要工具。搭建開發環境，創建項目文件夾、初始化項目、編寫代碼。啟動開發服務器，使用命令行運行命令。在瀏覽器中預覽項目，輸入開發服務器 URL。發布項目，優化代碼、部署項目、設置 Web 服務器配置。
H5頁面製作究竟指什麼
Apr 06, 2025 am 07:18 AM
H5 頁面製作是指使用 HTML5、CSS3 和 JavaScript 等技術，創建跨平台兼容的網頁。其核心在於瀏覽器解析代碼，渲染結構、樣式和交互功能。常見技術包括動畫效果、響應式設計和數據交互。為避免錯誤，應使用開發者工具調試；而性能優化和最佳實踐則包括圖像格式優化、減少請求和代碼規範等，以提高加載速度和代碼質量。
h5怎麼製作點擊圖標
Apr 06, 2025 pm 12:15 PM
製作 H5 點擊圖標的步驟包括：在圖像編輯軟件中準備方形源圖像。在 H5 編輯器中添加交互性，設置點擊事件。創建覆蓋整個圖標的熱點。設置點擊事件的操作，如跳轉頁面或觸發動畫。導出 H5 文檔為 HTML、CSS 和 JavaScript 文件。將導出的文件部署到網站或其他平台。
H5頁面製作適合哪些應用場景
Apr 05, 2025 pm 11:36 PM
H5（HTML5）適合應用於輕量級應用，如營銷活動頁面、產品展示頁面和企業宣傳微網站。它優勢在於跨平台性和豐富的交互性，但局限性在於復雜的交互和動畫、本地資源訪問和離線功能。
什麼是H5編程語言？
Apr 03, 2025 am 12:16 AM
H5不是獨立編程語言，而是HTML5、CSS3和JavaScript的集合，用於構建現代Web應用。 1.HTML5定義網頁結構和內容，提供新標籤和API。 2.CSS3控製樣式和佈局，引入動畫等新特性。 3.JavaScript實現動態交互，通過DOM操作和異步請求增強功能。
H5頁面製作是前端開發嗎
Apr 05, 2025 pm 11:42 PM
是的，H5頁面製作是前端開發的重要實現方式，涉及HTML、CSS和JavaScript等核心技術。開發者通過巧妙結合這些技術，例如使用<canvas>標籤繪製圖形或使用JavaScript控制交互行為，構建出動態且功能強大的H5頁面。
如何使用地理位置API處理用戶位置隱私和權限？
Mar 18, 2025 pm 02:16 PM
本文討論了使用GeOlocation API管理用戶位置隱私和權限，並強調要求權限，確保數據安全性並遵守隱私法律的最佳實踐。
H5和小程序與APP的區別
Apr 06, 2025 am 10:42 AM
H5、小程序和APP的主要區別在於：技術架構：H5基於網頁技術，小程序和APP為獨立應用程序。體驗和功能：H5輕便易用，功能受限；小程序輕量級，交互性好；APP功能強大，體驗流暢。兼容性：H5跨平台兼容，小程序和APP受平台限制。開發成本：H5開發成本低，小程序中等，APP最高。適用場景：H5適合信息展示，小程序適合輕量化應用，APP適合複雜功能應用。
