由于各瀏覽器對頁面的解析不同,會導致頁面在不同瀏覽器中顯示的樣式不一致,為了保持頁面的統一,經常需要對瀏覽器進行兼容性問題的調試。
CSS Hack
面對瀏覽器諸多的兼容性問題,經常需要通過CSS樣式來調試,其中用的最多的就是CSS Hack。所謂CSS Hack就是針對不同的瀏覽器書寫不同的CSS樣式,通過使用某個瀏覽器單獨識別的樣式代碼,控制該瀏覽器的顯示效果。CSS Hack主要分為兩類
CSS 選擇器Hack
CSS選擇器Hack是指通過在CSS選擇器的前面,加上一些只有特定瀏覽器才能識別的Hack前綴,來控制不同的CSS樣式。針對不同版本的瀏覽器,選擇器Hack分為以下幾類:
(1)IE6及IE6以下版本識別的選擇器Hack
書寫CSS樣式時,如果希望此樣式只對IE6及IE6以下版本的瀏覽器生效,可以使用IE6及以下版本的選擇器Hack,其基本語法如下:
* html 選擇器{樣式代碼}
(2)IE7識別的選擇器Hack
書寫CSS樣式時,如果希望此樣式只對IE7瀏覽器生效,可以使用IE7識別的選擇器Hack,其基本語法如下:
*+html 選擇器{樣式代碼}
CSS屬性Hack
這里小強老師,把屬性hack分為 前綴屬性hack和 后綴屬性hack
CSS屬性Hack(前綴) | 針對的瀏覽器 |
_color:red; | IE6及其以下的版本 |
*color:red ;或者 +color:red; | IE7及其以下的版本 |
CSS屬性Hack(后綴) | 針對的瀏覽器 |
color:red/9; | IE6/IE7/IE8/IE9/IE10版本 |
color:red/0; | IE8/IE9/IE10版本 |
color:red/9/0; | IE9/IE10 |
color:red!important | IE7/IE8/IE9/IE10及其他非IE瀏覽器 |
其實,現在越來越的公司,不太讓兼容ie6了,現在比較關心的是ie8.910等高版本的瀏覽器,因此這里小強老師也總結了ie專屬hack ,比如ie8等。
選擇器Hack寫法 | 針對于的瀏覽器 |
@media screen/9{body { background: red; }} | 只對IE6/7生效 |
@media /0screen {body { background: red; }} | 只對IE8生效 |
@media /0screen/,screen/9{body { background: blue; }} | 只對IE6/7/8有效 |
@media screen/0 {body { background: green; }} | 只對IE8/9/10有效 |
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} | 只對IE10有效 |
如果樣式比較多,條件注釋,是不錯的選擇:
IE條件注釋語句
IE條件注釋語句 | 針對的瀏覽器版本 |
<!--[if lt IE 7]>內容<![endif]--> | IE7 以下版本 |
<!--[if lte IE 7]>內容<![endif]--> | IE7及以下版本(包含IE7) |
<!--[if gt IE 7]>內容<![endif]--> | IE7 以上版本 |
<!--[if gte IE 7]>內容<![endif]--> | IE7及以上版本(包含IE7) |
<!--[if !IE 7]>內容<![endif]--> | 非IE7版本 |
<!--[if !IE]><!-->您使用不是 Internet Explorer<!--<![endif]--> | 非IE瀏覽器 |
以上就是小編為大家帶來的瀏覽器hack總結 詳細的瀏覽器兼容性的快速解決方法的全部內容了,希望大家多多支持腳步之家。
原文地址:http://www.cnblogs.com/androidshouce/archive/2016/06/16/5589770.html
新聞熱點
疑難解答