技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

IE7/IE8/IE9/IE11 CSS hack 寫法

作者:admin    時間:2016-10-17 7:24:9    瀏覽:

IE7、IE8、IE9、IE11雖然同屬IE家族，但他們在網(wǎng)頁渲染時，對css屬性的識別卻不盡相同，因此，我們會發(fā)現(xiàn)網(wǎng)頁在IE9瀏覽好好的，卻在IE11上瀏覽時出現(xiàn)錯亂的問題。作為一名合格的網(wǎng)頁設計者，應該考慮到各瀏覽器兼容的問題，因此，瀏覽器兼容性調試的工作是不能不做的。本文將舉例介紹IE家族IE7、IE8、IE9、IE11的css hack的問題，了解它們之間的差異，從而能夠寫出兼容性良好的css樣式代碼。

如何hack IE7/IE8/IE9/IE11 CSS

我們先看下面這段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實例_卡卡網(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)頁，會發(fā)現(xiàn)顯示的背景顏色（background-color）各不相同。分別如下：

IE7   #000000  （黑色black ▇）
IE8   #0000FF  （藍色blue ▇）
IE9   #0000FF  （藍色blue ▇）
IE11 #FFFF00  （黃色yellow ▇）
其他瀏覽器如Chrome、Firefox、360會顯示 #FF0000 （紅色red ▇）

上述實例css代碼是我經過反復調試而得出的兼容性寫法。經過此實例，可以看出 IE7、IE8、IE9、IE11 解析CSS的不同之處。概括如下：

  1. * 或 # ，IE7、IE11 支持。
  2. \9 ，IE8、IE9、IE11 支持。
  3. \0 ，IE8、IE9 支持。
  4. *、#、\9、\0 這幾個寫法除了IE外其他瀏覽器均不支持。

本文通過了一個實例介紹 IE7/IE8/IE9/IE11 CSS hack 的寫法，其實，這只是其中的一個寫法，對于IE家族，css hack還有其他的寫法，可以看看之前曾詳細介紹過的IE6\7\8\9\10\11瀏覽器的CSS hack大全。

本文實例演示及源碼下載

demo download

您可能對以下文章也感興趣

標簽: hack  
x