網(wǎng)頁制作解決兼容性問題

　　想必很多前端人員都會遇到瀏覽器不兼容問題。正是因為網(wǎng)站設計當中的這一需要產(chǎn)生了一項新技術— CSS Hack。 CSS Hack 就是針對不同瀏覽器寫出不同的 CSS code 的過程，主要用來解決目前各類瀏覽器無法標準解析CSS樣式，導致同一網(wǎng)站設計頁面在不同瀏覽器下出現(xiàn)顯示效果不一致的兼容問題。 針對不同瀏覽器，可以將CSS Hack 網(wǎng)站設計代碼整理如下：

　　1、針對I E 系列瀏覽器的網(wǎng)站設計代碼 針對 IE 6 的專屬 CSS Hack 網(wǎng)站設計代碼 #id{ _display: block; } 也就是在網(wǎng)站設計CSS屬性前加一個小劃線就好。 針對 IE 7 的專屬 CSS Hack 網(wǎng)站設計代碼 #id{ *display: block; } 即在網(wǎng)站設計CSS屬性前加上一個星號即可 針對 IE 8 的專屬 CSS Hack 網(wǎng)站設計代碼 #id{ margin-top: 10px 9; /*IE8*/ } 如上所示，解決辦法為在網(wǎng)站設計CSS屬性后分號前加上空格與斜線并加入一個數(shù)字9即可 。

　　2、針對火狐的CSS Hack 網(wǎng)站設計代碼 火狐可謂是最標準的瀏覽器之一了，網(wǎng)站設計技術只要稍稍不到位就能體現(xiàn)得淋漓盡致，所以不少網(wǎng)站設計師也很頭痛，其實想要解決火狐的兼容性除了要把網(wǎng)站設計的基礎知識扎牢之外只要將CSS代碼寫入到下圖 @-moz-document url-prefix(){ } 里面就行了 @-moz-document url-prefix() { #id{ display: block; } } 。

　　3、針對 Safari 的CSS Hack 網(wǎng)站設計代碼 Safari是蘋果計算機的最新作業(yè)系統(tǒng)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 網(wǎng)站設計代碼 Opera即Opera Software ASA，是臺式機、各種設備和移動網(wǎng)絡瀏覽器市場的商業(yè)領袖，因快速、小巧和比其他瀏覽器更佳的標準兼容性獲得了國際上的最終用戶和業(yè)界媒體的承認，并在網(wǎng)上受到很多人的推崇。 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #id { display: block; } } 這個世界上必然不會存在絕對完美的事物，因此運用以上方法讓我們的網(wǎng)站設計更好的與各種瀏覽器兼容的時候其實已經(jīng)違反了網(wǎng)站制作的W3C標準。

【網(wǎng)頁制作解決兼容性問題】相關文章：

Dreamweaver解決網(wǎng)頁制作中的空格問題05-06

PHP版本5.2.17 5.3.27 5.3.28 5.4 5.5的兼容性問題分析03-10

怎樣制作網(wǎng)頁 制作網(wǎng)頁詳細操作步驟01-23

電腦鍵盤和主板不兼容解決方法12-15

網(wǎng)頁設計網(wǎng)頁制作的流程分析04-03

Dreamweaver制作網(wǎng)頁的方法02-13

如何制作網(wǎng)頁設計02-24

Dreamweaver制作網(wǎng)頁的技巧05-07

網(wǎng)頁互動按鈕的制作05-13