IT市場越是發達,可供網民們使用的網絡工具就越多,這其中包括各色各樣的瀏覽器,不同風格不同習慣的瀏覽器雖然在最大程度上滿足了不同愛好的網民朋友但卻給網站設計師們帶來了困惑,為了能讓自己的網站設計正常的運行于各種瀏覽器平臺,網站設計師們不得不想盡辦法處理好網站設計中的瀏覽器兼容問題。正是因為網站設計當中的這一需要產生了一項新技術— CSS Hack。
CSS Hack 就是針對不同瀏覽器寫出不同的 CSS code 的過程,主要用來解決目前各類瀏覽器無法標準解析CSS樣式,導致同一網站設計頁面在不同瀏覽器下出現顯示效果不一致的兼容問題。
針對不同瀏覽器,我們可以將CSS Hack 網站設計代碼整理如下:
1、針對I E 系列瀏覽器的網站設計代碼
針對 IE 6 的專屬 CSS Hack 網站設計代碼
#id{
_display: block;
}
也就是在網站設計CSS屬性前加一個小劃線就好。
針對 IE 7 的專屬 CSS Hack 網站設計代碼
#id{
*display: block;
}
即在網站設計CSS屬性前加上一個星號即可
針對 IE 8 的專屬 CSS Hack 網站設計代碼
#id{
margin-top: 10px \9; /*IE8*/
}
如上所示,解決辦法為在網站設計CSS屬性后分號前加上空格與斜線并加入一個數字9即可
2、針對火狐的CSS Hack 網站設計代碼
火狐可謂是最標準的瀏覽器之一了,網站設計技術只要稍稍不到位就能體現得淋漓盡致,所以不少網站設計師也很頭痛,其實想要解決火狐的兼容性除了要把網站設計的基礎知識扎牢之外只要將CSS代碼寫入到下圖 @-moz-document url-prefix(){ } 里面就行了
@-moz-document url-prefix()
{
#id{ display: block; }
}
3、針對 Safari 的CSS Hack 網站設計代碼
Safari是蘋果計算機的最新作業系統Mac OS X中新的瀏覽器,用來取代之前的Internet Explorer for Mac,它使用了KDE的KHTML作為瀏覽器的運算核心。
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#id { display: block; }
}
它的兼容性做法和火狐相近。
4、針對 Opera 的CSS Hack 網站設計代碼
Opera即Opera Software ASA,是臺式機、各種設備和移動網絡瀏覽器市場的商業領袖,因快速、小巧和比其他瀏覽器更佳的標準兼容性獲得了國際上的最終用戶和業界媒體的承認,并在網上受到很多人的推崇。
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #id { display: block; }
}
這個世界上必然不會存在絕對完美的事物,因此運用以上方法讓我們的網站設計更好的與各種瀏覽器兼容的時候其實已經違反了網站制作的W3C標準,但如果網站都不能正常打開,那些所謂的標準又有什么意思呢?這需要根據實際情況來取決。
上一條:
邵新公路后續工程排定時間表 12月底全面竣工 邵陽到新寧的路修的怎么樣了下一條:
關于網站設計CSS書寫的高效提升法