建站知識
網(wǎng)站設計知識 網(wǎng)站建設知識 網(wǎng)絡營銷知識 微信資訊 常見問題 網(wǎng)站備案 近期客戶網(wǎng)站建設套餐
標準型網(wǎng)站建設 精美型網(wǎng)站建設 營銷型網(wǎng)站建設 高端品牌網(wǎng)站建設 電子商務型網(wǎng)站建設 行業(yè)門戶型網(wǎng)站建設 手機網(wǎng)站建設 微信網(wǎng)站建設如何處理網(wǎng)頁兼容性問題
來源:征帆網(wǎng)絡 作者:ymars 日期:2013-1-22
在網(wǎng)站設計制作中由于不同的瀏覽器對CSS樣式的解析方法不一樣,從而造成了網(wǎng)頁兼容問題。針對不同瀏覽器寫不同CSS樣式,這個過程稱為css hack。
大家都知道在目前ie瀏覽器的市場份額是最高的,其次就是火狐和chrome瀏覽器,可以說解決網(wǎng)頁兼容問題就是針對這三款瀏覽器。
為什么瀏覽器對css的解析不同?那么我將以那個瀏覽器最為標準呢?這是因為瀏覽器軟件開發(fā)中存在的技術缺陷。一般來說火狐瀏覽器和chrome對css的解析是正確的,而ie則存在一些bug,我們總不能以一個錯誤的標準去修正我們的行為。所以我們首先用火狐或者google chrome瀏覽器來將網(wǎng)頁的css樣式設置好,然后對ie的各版本設置css兼容。
ie的各個版本中,低于ie6的版本幾乎沒有什么人在用,可以將其忽略,那么我們設置css瀏覽器兼容的對象就集中在ie6~ie9。我們可以通過以下方式來分別對不同瀏覽器設置css:
1、條件注釋
在</head>標記之前插入只對ie瀏覽器適用的條件注釋代碼。
1<!--[if lt IE 7]>版本小于IE7將看到這行<![endif]-->
2<!--[if lte IE 7]>版本小于或等于IE7將看到這行<![endif]-->
3<!--[if IE 7]>版本如果是IE7將看到這行<![endif]-->
4<!--[if gt IE 7]>版本大于IE7將看到這行<![endif]-->
lt(小于)、gt(大于)、lte(小于或等于)、gte(大于或等于)
實例代碼:
1<!--[if IE 6]>
2<style type="text/css">
3 /* 針對IE6定義的樣式 */
4</style>
5<![endif]-->
2、css hack
針對特定版本的ie寫css樣式,以下是各版本ie的css hack寫法列表:
Hack Example IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q)
* *color Yes Yes Yes Yes No Yes
+ +color Yes Yes Yes Yes No Yes
- -color Yes Yes No No No No
_ _color Yes Yes No Yes No Yes
# #color Yes Yes Yes Yes No Yes
\0 color\0 No No No No Yes No
\9 color\9 Yes Yes Yes Yes Yes Yes
!important color:blue !important;color:green; No No Yes No Yes No
這里S代表standard標準模式,Q代表Quirks怪異模式
實例代碼:
.box {
background: gray; /* 基本的 */
background: pink\9; /* IE 8 及低于IE8版本 */
*background: green; /* IE 7 及低于IE7版本 */
-background: blue; /* IE 6 */
}
3、針對google chrome瀏覽器的css hack:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/ * 針對Google Chrome、Safari 3.0、Opera 9 的CSS樣式 * /
}
4、針對firefox瀏覽器的css hack:
@-moz-document url-prefix(){
/ * 針對firefox的CSS樣式 * /
}
大家都知道在目前ie瀏覽器的市場份額是最高的,其次就是火狐和chrome瀏覽器,可以說解決網(wǎng)頁兼容問題就是針對這三款瀏覽器。
為什么瀏覽器對css的解析不同?那么我將以那個瀏覽器最為標準呢?這是因為瀏覽器軟件開發(fā)中存在的技術缺陷。一般來說火狐瀏覽器和chrome對css的解析是正確的,而ie則存在一些bug,我們總不能以一個錯誤的標準去修正我們的行為。所以我們首先用火狐或者google chrome瀏覽器來將網(wǎng)頁的css樣式設置好,然后對ie的各版本設置css兼容。
ie的各個版本中,低于ie6的版本幾乎沒有什么人在用,可以將其忽略,那么我們設置css瀏覽器兼容的對象就集中在ie6~ie9。我們可以通過以下方式來分別對不同瀏覽器設置css:
1、條件注釋
在</head>標記之前插入只對ie瀏覽器適用的條件注釋代碼。
1<!--[if lt IE 7]>版本小于IE7將看到這行<![endif]-->
2<!--[if lte IE 7]>版本小于或等于IE7將看到這行<![endif]-->
3<!--[if IE 7]>版本如果是IE7將看到這行<![endif]-->
4<!--[if gt IE 7]>版本大于IE7將看到這行<![endif]-->
lt(小于)、gt(大于)、lte(小于或等于)、gte(大于或等于)
實例代碼:
1<!--[if IE 6]>
2<style type="text/css">
3 /* 針對IE6定義的樣式 */
4</style>
5<![endif]-->
2、css hack
針對特定版本的ie寫css樣式,以下是各版本ie的css hack寫法列表:
Hack Example IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q)
* *color Yes Yes Yes Yes No Yes
+ +color Yes Yes Yes Yes No Yes
- -color Yes Yes No No No No
_ _color Yes Yes No Yes No Yes
# #color Yes Yes Yes Yes No Yes
\0 color\0 No No No No Yes No
\9 color\9 Yes Yes Yes Yes Yes Yes
!important color:blue !important;color:green; No No Yes No Yes No
這里S代表standard標準模式,Q代表Quirks怪異模式
實例代碼:
.box {
background: gray; /* 基本的 */
background: pink\9; /* IE 8 及低于IE8版本 */
*background: green; /* IE 7 及低于IE7版本 */
-background: blue; /* IE 6 */
}
3、針對google chrome瀏覽器的css hack:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/ * 針對Google Chrome、Safari 3.0、Opera 9 的CSS樣式 * /
}
4、針對firefox瀏覽器的css hack:
@-moz-document url-prefix(){
/ * 針對firefox的CSS樣式 * /
}
相關文章列表