卡卡网是专业的网站测速平台，网速测试，测试网站速度，就来卡卡网 ~
 |  |  |
 |  |  |
|
IE7、IE8、IE9、IE11雖然同屬IE家族，但他們?cè)诰W(wǎng)頁渲染時(shí)，對(duì)css屬性的識(shí)別卻不盡相同，因此，我們會(huì)發(fā)現(xiàn)網(wǎng)頁在IE9瀏覽好好的，卻在IE11上瀏覽時(shí)出現(xiàn)錯(cuò)亂的問題。作為一名合格的網(wǎng)頁設(shè)計(jì)者，應(yīng)該考慮到各瀏覽器兼容的問題，因此，瀏覽器兼容性調(diào)試的工作是不能不做的。本文將舉例介紹IE家族IE7、IE8、IE9、IE11的css hack的問題，了解它們之間的差異，從而能夠?qū)懗黾嫒菪粤己玫腸ss樣式代碼。
我們先看下面這段HTML代碼：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <meta http-equiv="Content-Language" content="zh-CN" />
- <meta http-equiv="Cache-Control" content="no-transform " />
- <meta http-equiv="Cache-Control" content="no-siteapp" />
- <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
- <title>hack IE7/IE8/IE9/IE11_css實(shí)例_卡卡網(wǎng) webkaka.com</title>
- <style type="text/css">
- .content_ie7{
- *background-color:#000000; /* black ie7 ie11 */
- /* 或 */
- #background-color:#000000; /* black ie7 ie11 */
- }
- .content{
- width:200px;height:50px;color:#ccc;
- background-color:#FF0000; /* red default */
- background-color:#FFFF00\9; /* yellow ie8 ie9 ie11 */
- background-color:#0000FF\0; /* blue ie8 ie9 */
- }
- </style>
- </head>
- <body>
- <div class="content_ie7 content">hack IE7 IE8 IE9 IE11</div>
- </body>
- </html>
分別用 IE7 IE8 IE9 IE11 瀏覽器打開網(wǎng)頁，會(huì)發(fā)現(xiàn)顯示的背景顏色（background-color）各不相同。分別如下：
IE7 #000000 （黑色black ▇）
IE8 #0000FF （藍(lán)色blue ▇）
IE9 #0000FF （藍(lán)色blue ▇）
IE11 #FFFF00 （黃色yellow ▇）
其他瀏覽器如Chrome、Firefox、360會(huì)顯示 #FF0000 （紅色red ▇）
上述實(shí)例css代碼是我經(jīng)過反復(fù)調(diào)試而得出的兼容性寫法。經(jīng)過此實(shí)例，可以看出 IE7、IE8、IE9、IE11 解析CSS的不同之處。概括如下：
本文通過了一個(gè)實(shí)例介紹 IE7/IE8/IE9/IE11 CSS hack 的寫法，其實(shí)，這只是其中的一個(gè)寫法，對(duì)于IE家族，css hack還有其他的寫法，可以看看之前曾詳細(xì)介紹過的IE6\7\8\9\10\11瀏覽器的CSS hack大全。
_henghost.gif)
