如何快速解決瀏覽器的兼容性的問題

發布時間：2021-09-15 11:32:31 來源：億速云閱讀：139 作者：柒染欄目：web開發

本篇文章為大家展示了如何快速解決瀏覽器的兼容性的問題，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

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

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瀏覽器

上述內容就是如何快速解決瀏覽器的兼容性的問題，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本