隨筆 - 28, 文章 - 0, 評論 - 3, 引用 - 0
          數據加載中……

          IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一覽表

          不同的瀏覽器對CSS的解釋都有一點出入,特別是padding, line-height這些要細微控制的地方,下面的hack基本可以解決這個問題:
          • 在屬性前加下劃線(_),那么此屬性只會被IE6解釋
          • 在屬性前加星號(*),此屬性只會被IE7解釋
          • 在屬性值后面加"\9",表示此屬性只會被IE8解釋
          詳細出處參考:http://www.jb51.net/css/24946.html

          各瀏覽器CSS hack兼容表:
           

          整體測試代碼示例:

          復制代碼代碼如下:
          .test{
          color:#000000;
          color:#0000FF\0;
          [color:#00FF00;
          *color:#FFFF00;
          _color:#FF0000;
          }


          復制代碼代碼如下:
          #menu { line-height: 23px; }/* firefox 瀏覽器實行這句定義 */
          #menu { line-height: 26px\9; }/*ie6,ie7,ie8 這句定義主要尖對IE8來hack*/
          #menu { *line-height: 23px; }/*ie6,ie7 這句定義主要尖對IE7來hack*/
          #menu { _line-height: 23px; }/*ie6 瀏覽器優先實行這句定義*/
          或者寫成一句,注意順序
          #menu { line-height:23px; line-height: 26px\9; *line-height: 23px; _line-height:23px; }
          或者
          * html #menu { line-height: 23px; } /* IE6 瀏覽器實行這句定義 */
          *+html #menu { line-height: 23px; }/* IE7 瀏覽器實行這句定義*/

          其他說明:
          1、如果你的頁面對IE7兼容沒有問題,又不想大量修改現有代碼,同時又能在IE8中正常使用,微軟聲稱,開發商僅需要在目前兼容IE7的網站上添加一行代碼即可解決問題,此代碼如下:
          <meta http-equiv="x-ua-compatible" content="ie=7" />
          2、body:nth-of-type(1) 如果這樣寫,表示全局查找body,將會對應第一個<body>。
          3、還有其他寫法,比如:
          *html #test{}或者 *+html #test{}
          4、*+html 對IE7的hack 必須保證HTML頂部有如下聲明:
          http://www.w3.org/TR/html4/loose.dtd
          5、順序:Firefox、IE8、IE7、IE6依次排列。
          小知識:什么是CSS hack?
            由于不同的瀏覽器,比如IE6、IE7、IE8、Firefox等,對CSS的解析認識不一樣,因此會導致生成的頁面效果不一樣,得不到我們所需要的頁面效果。
            這個時候我們就需要針對不同的瀏覽器去寫不同的CSS,讓它能夠同時兼容不同的瀏覽器,能在不同的瀏覽器中也能得到我們想要的頁面效果。
            這個針對不同的瀏覽器寫不同的CSS code的過程,就叫CSS hack,也叫寫CSS hack。
          下面是補充:

          復制代碼代碼如下:
          selector{
          property:value; /* 所有瀏覽器 */
          property:value\9; /* 所有IE瀏覽器 */
          +property:value; /* IE7 */
          _property:value; /* IE6 */
          }


          詳細出處參考:http://www.jb51.net/css/24946.html

          posted on 2010-03-16 11:28 Angle Wang 閱讀(1155) 評論(0)  編輯  收藏


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 贵定县| 建始县| 双城市| 小金县| 广河县| 达孜县| 阜新市| 三河市| 神农架林区| 额敏县| 邻水| 长岛县| 康定县| 大竹县| 肃南| 双辽市| 克什克腾旗| 江北区| 鲁甸县| 江城| 页游| 绥滨县| 柳河县| 阿荣旗| 普兰店市| 普陀区| 浙江省| 普兰县| 成武县| 黎平县| 师宗县| 安仁县| 宁海县| 韩城市| 孝感市| 耿马| 海盐县| 泗水县| 克拉玛依市| 西昌市| 武清区|