http://www.aygfsteel.com/ebecket 返還網(wǎng)
          隨筆-140  評論-11  文章-131  trackbacks-0
          IE6/IE7/FF的CSS hack 瀏覽器兼容總結(jié)
          2010-01-23 15:25

          由于不同的瀏覽器對CSS的支持及解析結(jié)果不一樣,處理的優(yōu)先級不一樣。針對不同的瀏覽器來寫不同的CSS達到在不同瀏覽器下顯示想要的效果就是css hack。先貼兩個直觀的對比圖:


          再貼一段代碼:

          #bgcolor {
                      background:red !important; /* Firefox 等其他瀏覽器 */
                      background:blue; /* IE6 */
                      }
                      *+html #bgcolor {
                      background:green !important; /* IE7 */
                      }

          IE6 不認 !important, 也不認 *+html. 所以 IE6 只能是 blue.
          IE7 認 !important, 也認 *+html, 優(yōu)先度: (*+html + !important) > !important > +html. IE7 可以是 red, blue 和 green, 但 green 的優(yōu)先度最高.
          Firefox 和其他瀏覽器都認 !important. !important 優(yōu)先, Firefox 可以是 red 和 blue, 但 red 優(yōu)先度高。

          下面以一個實際需求進行不同寫法的實現(xiàn):

          針對下面的html代碼:

          <body> 
              <div><span>Text</span></div> 
          </body>

            寫CSS代碼,分別在IE6、IE7、FF下顯示不同的效果:

            簡單說明一下:IE6的劃線是在下邊、IE7是中間、FF是上邊。因為IE6兼容性最差(同時下劃線_只有ie6支持),IE7標準居中,F(xiàn)F標準最高。

            第一種方法:

          div{ 
              text-decoration:overline; 
              *text-decoration:line-through; 
              _text-decoration:underline; 
          }

            原理是:


            簡單地說,就是利用下面幾點:

            1.各個瀏覽器解析CSS的語法不盡相同

            2.CSS語法規(guī)則:后面的屬性覆蓋前面的屬性

            而這里僅僅是利用了_(IE6的專屬)和*(用于IE6和IE7),接下來利用一下!important語法。

            第二種方法:

            !important語法針對的是“后面的屬性覆蓋前面的屬性”這一語法,也就是說標識了!important的屬性,是不被后面的相同屬性所覆蓋的,而IE6不認識這個,導(dǎo)致其他瀏覽器很容易根據(jù)這點“欺負”IE6:

          div{ 
              text-decoration:overline; 
              *text-decoration:line-through!important; 
              *text-decoration:underline; 
          }

            原理:

            1.FF不認識*,但IE6/IE7認識

            2.IE6不認識!imprtant,但IE7認識

            注意,順序不能換,如果改為下面這樣:

          text-decoration:overline; 
          *text-decoration:underline; 
          *text-decoration:line-through !important;

            IE6和IE7都一樣了。

            IE6是支持!important屬性的(該屬性為CSS1語法,支持IE4+),上面的寫法只是IE6的一個bug(同一個{}里面,相同屬性取后者),若想要IE6支持,一般的做法是將CSS拆分,比如:

          div{
              text-decoration:line-through!important; 
          }
          div{
              text-decoration:underline;
          }

            這樣,在IE6下,顯示的是line-through效果。

            第三種方法:

            先看一個表



            為了方便記憶,在上面那個hack表增加了“針對對象”一列(關(guān)于*旁邊有無空格均可,可以理解其同時也作為分隔符),需要補充的是IE7的專屬寫法:*+html div

            在此就利用IE6和IE7的專屬寫法:

          div{ 
              text-decoration:overline; 
          } 
          *+html div{ 
              text-decoration:line-through; 
          } 
          * html div{ 
              text-decoration:underline; 
          }

            第四種方法:

          div{ 
              text-decoration:overline; 
          } 
          html*div{ 
              text-decoration:line-through !important; 
              text-decoration:underline; 
          }

            原理:利用IE6/IE7的共同專屬 + IE6不懂!important

            第五種方法:

          body>div{ 
              text-decoration:overline; 
              *text-decoration:line-through; 
          } 
          div{ 
              text-decoration:underline; 
          }

            原理:利用IE6不懂>這種選擇符 + 針對屬性的hack。

          另外還有/**/或者@important等方法。

          為了通過W3C驗證工具,需要把hack樣式放到不同文件中處理。一個是針對所有瀏覽器的, 一個只為 IE 服務(wù). 將所有符合 W3C 的代碼寫到一個里面去, 而一些 IE 中必須的, 又不能通過 W3C 驗證的代碼 (如: cursor:hand;) 放到另一個文件中, 再用下面的方法導(dǎo)入.

          <!-- 放置所有瀏覽器的樣式 -->
          <link rel="stylesheet" href="style.css" type="text/css" />
          <!-- 只放置 IE 必須的, 而不能通過 W3C 的代碼 -->
          <!--[if IE]>
          <link rel="stylesheet" href="style_ie.css" type="text/css" />
          <![endif]-->

          posted on 2010-03-23 10:10 becket_zheng 閱讀(303) 評論(0)  編輯  收藏 所屬分類: 網(wǎng)頁web前端技術(shù)
          主站蜘蛛池模板: 资兴市| 佛山市| 若羌县| 三门县| 平舆县| 弥渡县| 河东区| 宿迁市| 商城县| 涪陵区| 灵寿县| 巍山| 黔南| 东山县| 正蓝旗| 饶河县| 盐源县| 金堂县| 石首市| 湘潭县| 扶绥县| 建德市| 沧州市| 海口市| 如东县| 琼结县| 泰和县| 视频| 潼关县| 宜春市| 得荣县| 石家庄市| 新丰县| 介休市| 普陀区| 安丘市| 得荣县| 丹凤县| 清涧县| 石棉县| 酉阳|