溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了CSS Hack技術解決多瀏覽器兼容問題是怎樣的，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
向大家描述一下如何使用CSS Hack技巧解決DIV+CSS布局多瀏覽器兼容問題，針對不同的瀏覽器寫不同的CSS代碼的過程，就叫CSS Hack。
CSS Hack技巧匯總
CSS Hack簡介
我們在用DIV+CSS制作網頁時，由于不同的瀏覽器，比如InternetExplorer6,InternetExplorer7,MozillaFirefox等對CSS的支持及解析結果不一樣，導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。這時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。這個針對不同的瀏覽器寫不同的CSS代碼的過程，就叫CSS Hack。
為了向你展示這些CSS Hack是否正常運作，我新建六個P標簽，并給每一個P標簽一個特有的id。這將向你展示CSS Hack的運作情況。
<pidpid="opera">我來自Opera7.2-9.5</p> <pidpid="safari">我是神奇的Safari</p> <pidpid="firefox">我來自Firefox</p> <pidpid="firefox12">我是FF前輩Firefox1-2</p> <pidpid="ie7">我是IE7</p> <pidpid="ie6">我是殘品IE6</p>
然后我讓這些P標簽默認都不顯示
<styletypestyletype="text/css"> bodyp{display:none;} </style>使用IE CSS條件注釋區分IE瀏覽器
最簡單的區分IE瀏覽器的方法自然是使用他們的條件注釋。微軟創建了一個強大的語法來讓我們去實現這個功能。我不想再詳細地介紹IE條件注釋了，我想你在搜索引擎能搜索到上萬個搜索條目，我這里只要這兩個：
<!--[ifIE7]> <styletypestyletype="text/css"> </style> <![endif]--> <!--[ifIE6]> <styletypestyletype="text/css"> </style> <![endif]-->
使用CSS解析器Hacks區分IE
雖說IE條件注釋十分簡單好用，但是如果你想把全部的CSS放到一個文件里的話，那么你不得不使用別的方法。注意這里的IE7Hack將只對IE7有效，因為IE6根本不知道>選擇符。同時你也得注意>選擇符對于其他瀏覽器同樣是無效的。
/*IE7*/ html>body#ie7 {*display:block;} /*IE6*/ body#ie6 {_display:block;}CSS Hack區分Firefox
***個使用了body:empty來區分Firefox1和2。第二個hack使用了全部Firefox瀏覽器的專有擴展-moz。-moz只對Firefox有效，使用這個Hack大可不必擔心其他瀏覽器的影響。
/*Firefox1-2*/ body:empty#firefox12 {display:block;} /*Firefox*/ @-moz-documenturl-prefix() {#firefox{display:block;}}CSS Hack區分Safari
Safari的CSS Hack與Firefox的hack看起來很像，使用的是Safari瀏覽器的專有擴展-webkit且只對Safari瀏覽器有效。
/*Safari*/ @mediascreenand(-webkit-min-device-pixel-ratio:0) {#safari{display:block;}}CSS Hack區分Opera
/*Opera*/ @mediaalland(-webkit-min-device-pixel-ratio:10000), notalland(-webkit-min-device-pixel-ratio:0) {head~body#opera{display:block;}}然后，全部合在一起便是完整代碼：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <htmllanghtmllang="en"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"> <title>CSSBrowserHacks</title> <styletypestyletype="text/css"> bodyp { display:none; } /*Opera*/ html:first-child#opera { display:block; } /*IE7*/ html>body#ie7 { *display:block; } /*IE6*/ body#ie6 { _display:block; } /*Firefox1-2*/ body:empty#firefox12 { display:block; } /*Firefox*/ @-moz-documenturl-prefix() { #firefox{display:block;} } /*Safari*/ @mediascreenand(-webkit-min-device-pixel-ratio:0) { #safari{display:block;} } /*Opera*/ @mediaalland(-webkit-min-device-pixel-ratio:10000), notalland(-webkit-min-device-pixel-ratio:0) { head~body#opera{display:block;} } </style> </head> <body> <pidpid="opera">我來自Opera7.2-9.5</p> <pidpid="safari">我是神奇的Safari</p> <pidpid="firefox">我來自Firefox</p> <pidpid="firefox12">我是FF前輩Firefox1-2</p> <pidpid="ie7">我是囧IE7</p> <pidpid="ie6">我是殘品IE6</p></body> </html>CSS Hack雖好且方便兼容各瀏覽器，但是通不過W3C驗證，所以還得自己權衡是否有必要去使用。
上述內容就是CSS Hack技術解決多瀏覽器兼容問題是怎樣的，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
