- 相關(guān)推薦
網(wǎng)頁(yè)制作解決兼容性問(wèn)題
想必很多前端人員都會(huì)遇到瀏覽器不兼容問(wèn)題。正是因?yàn)榫W(wǎng)站設(shè)計(jì)當(dāng)中的這一需要產(chǎn)生了一項(xiàng)新技術(shù)— CSS Hack。 CSS Hack 就是針對(duì)不同瀏覽器寫出不同的 CSS code 的過(guò)程，主要用來(lái)解決目前各類瀏覽器無(wú)法標(biāo)準(zhǔn)解析CSS樣式，導(dǎo)致同一網(wǎng)站設(shè)計(jì)頁(yè)面在不同瀏覽器下出現(xiàn)顯示效果不一致的兼容問(wèn)題。 針對(duì)不同瀏覽器，可以將CSS Hack 網(wǎng)站設(shè)計(jì)代碼整理如下：
1、針對(duì)I E 系列瀏覽器的網(wǎng)站設(shè)計(jì)代碼 針對(duì) IE 6 的專屬 CSS Hack 網(wǎng)站設(shè)計(jì)代碼 #id{ _display: block; } 也就是在網(wǎng)站設(shè)計(jì)CSS屬性前加一個(gè)小劃線就好。 針對(duì) IE 7 的專屬 CSS Hack 網(wǎng)站設(shè)計(jì)代碼 #id{ *display: block; } 即在網(wǎng)站設(shè)計(jì)CSS屬性前加上一個(gè)星號(hào)即可 針對(duì) IE 8 的專屬 CSS Hack 網(wǎng)站設(shè)計(jì)代碼 #id{ margin-top: 10px 9; /*IE8*/ } 如上所示，解決辦法為在網(wǎng)站設(shè)計(jì)CSS屬性后分號(hào)前加上空格與斜線并加入一個(gè)數(shù)字9即可 。
2、針對(duì)火狐的CSS Hack 網(wǎng)站設(shè)計(jì)代碼 火狐可謂是最標(biāo)準(zhǔn)的瀏覽器之一了，網(wǎng)站設(shè)計(jì)技術(shù)只要稍稍不到位就能體現(xiàn)得淋漓盡致，所以不少網(wǎng)站設(shè)計(jì)師也很頭痛，其實(shí)想要解決火狐的兼容性除了要把網(wǎng)站設(shè)計(jì)的基礎(chǔ)知識(shí)扎牢之外只要將CSS代碼寫入到下圖 @-moz-document url-prefix(){ } 里面就行了 @-moz-document url-prefix() { #id{ display: block; } } 。
3、針對(duì) Safari 的CSS Hack 網(wǎng)站設(shè)計(jì)代碼 Safari是蘋果計(jì)算機(jī)的最新作業(yè)系統(tǒng)Mac OS X中新的瀏覽器，用來(lái)取代之前的Internet Explorer for Mac，使用了KDE的KHTML作為瀏覽器的運(yùn)算核心。 @media screen and (-webkit-min-device-pixel-ratio:0) { #id { display: block; } } 兼容性做法和火狐相近。
4、針對(duì) Opera 的CSS Hack 網(wǎng)站設(shè)計(jì)代碼 Opera即Opera Software ASA，是臺(tái)式機(jī)、各種設(shè)備和移動(dòng)網(wǎng)絡(luò)瀏覽器市場(chǎng)的商業(yè)領(lǐng)袖，因快速、小巧和比其他瀏覽器更佳的標(biāo)準(zhǔn)兼容性獲得了國(guó)際上的最終用戶和業(yè)界媒體的承認(rèn)，并在網(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; } } 這個(gè)世界上必然不會(huì)存在絕對(duì)完美的事物，因此運(yùn)用以上方法讓我們的網(wǎng)站設(shè)計(jì)更好的與各種瀏覽器兼容的時(shí)候其實(shí)已經(jīng)違反了網(wǎng)站制作的W3C標(biāo)準(zhǔn)。
【網(wǎng)頁(yè)制作解決兼容性問(wèn)題】相關(guān)文章：
Dreamweaver解決網(wǎng)頁(yè)制作中的空格問(wèn)題05-06
PHP版本5.2.17 5.3.27 5.3.28 5.4 5.5的兼容性問(wèn)題分析03-10
怎樣制作網(wǎng)頁(yè) 制作網(wǎng)頁(yè)詳細(xì)操作步驟01-23
電腦鍵盤和主板不兼容解決方法12-15
網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)頁(yè)制作的流程分析04-03
Dreamweaver制作網(wǎng)頁(yè)的方法02-13
如何制作網(wǎng)頁(yè)設(shè)計(jì)02-24