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

來源：懂視網責編：小采時間：2020-11-27 16:41:05

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

瀏覽器hack總結詳細的瀏覽器兼容性解決方法:由于各瀏覽器對頁面的解析不同，會導致頁面在不同瀏覽器中顯示的樣式不一致，為了保持頁面的統一，經常需要對瀏覽器進行兼容性問題的調試。 CSS Hack 面對瀏覽器諸多的兼容性問題，經常需要通過CSS樣式來調試，其中用的最多的就是CSS Hack。所謂CSS Ha

推薦度：

點擊下載本文 文檔為doc格式

導讀瀏覽器hack總結詳細的瀏覽器兼容性解決方法:由于各瀏覽器對頁面的解析不同，會導致頁面在不同瀏覽器中顯示的樣式不一致，為了保持頁面的統一，經常需要對瀏覽器進行兼容性問題的調試。 CSS Hack 面對瀏覽器諸多的兼容性問題，經常需要通過CSS樣式來調試，其中用的最多的就是CSS Hack。所謂CSS Ha

（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條件注釋語句	針對的瀏覽器版本
內容	IE7 以下版本
內容	IE7及以下版本（包含IE7）
內容	IE7 以上版本
內容	IE7及以上版本（包含IE7）
內容	非IE7版本
您使用不是 Internet Explorer	非IE瀏覽器