瀏覽器hack總結詳細的瀏覽器兼容性的快速解決方法

2024-07-11 09:07:31

字體：大中小

來源：轉載

供稿：網友

由于各瀏覽器對頁面的解析不同，會導致頁面在不同瀏覽器中顯示的樣式不一致，為了保持頁面的統一，經常需要對瀏覽器進行兼容性問題的調試。

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

其實，現在越來越的公司，不太讓兼容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瀏覽器