首頁> 新聞中心
如何處理(lǐ)網頁兼容性問題
發布時(shí)間(jiān) :2018-05-14 08:31
在網站(zhàn)設計(jì)制(zhì)作(zuò)中由于不同的浏覽器(qì)對CSS樣式的解析方法不一樣，從而造成了網頁兼容問題。針對不同浏覽器(qì)寫不同CSS樣式，這個(gè)過程稱為(wèi)css hack。
大(dà)家(jiā)都知道(dào)在目前ie浏覽器(qì)的市場(chǎng)份額是最高(gāo)的，其次就是火(huǒ)狐和(hé)chrome浏覽器(qì)，可(kě)以說解決網頁兼容問題就是針對這三款浏覽器(qì)。
為(wèi)什麽浏覽器(qì)對css的解析不同？那(nà)麽我将以那(nà)個(gè)浏覽器(qì)最為(wèi)标準呢？這是因為(wèi)浏覽器(qì)軟件開(kāi)發中存在的技(jì)術(shù)缺陷。一般來(lái)說火(huǒ)狐浏覽器(qì)和(hé)chrome對css的解析是正确的，而ie則存在一些(xiē)bug，我們總不能以一個(gè)錯誤的标準去修正我們的行(xíng)為(wèi)。所以我們首先用火(huǒ)狐或者google chrome浏覽器(qì)來(lái)将網頁的css樣式設置好，然後對ie的各版本設置css兼容。
ie的各個(gè)版本中，低(dī)于ie6的版本幾乎沒有(yǒu)什麽人(rén)在用，可(kě)以将其忽略，那(nà)麽我們設置css浏覽器(qì)兼容的對象就集中在ie6~ie9。我們可(kě)以通(tōng)過以下方式來(lái)分别對不同浏覽器(qì)設置css:
1、條件注釋
在</head>标記之前插入隻對ie浏覽器(qì)适用的條件注釋代碼。
1<!--[if lt IE 7]>版本小(xiǎo)于IE7将看到這行(xíng)<![endif]-->
2<!--[if lte IE 7]>版本小(xiǎo)于或等于IE7将看到這行(xíng)<![endif]-->
3<!--[if IE 7]>版本如果是IE7将看到這行(xíng)<![endif]-->
4<!--[if gt IE 7]>版本大(dà)于IE7将看到這行(xíng)<![endif]-->
lt（小(xiǎo)于）、gt（大(dà)于）、lte（小(xiǎo)于或等于）、gte（大(dà)于或等于）
實例代碼：
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 及低(dī)于IE8版本 */
*background: green; /* IE 7 及低(dī)于IE7版本 */
-background: blue; /* IE 6 */
}
3、針對google chrome浏覽器(qì)的css hack:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/ * 針對Google Chrome、Safari 3.0、Opera 9 的CSS樣式 * /
}
4、針對firefox浏覽器(qì)的css hack:
@-moz-document url-prefix(){
/ * 針對firefox的CSS樣式 * /
}
大(dà)家(jiā)都知道(dào)在目前ie浏覽器(qì)的市場(chǎng)份額是最高(gāo)的，其次就是火(huǒ)狐和(hé)chrome浏覽器(qì)，可(kě)以說解決網頁兼容問題就是針對這三款浏覽器(qì)。
為(wèi)什麽浏覽器(qì)對css的解析不同？那(nà)麽我将以那(nà)個(gè)浏覽器(qì)最為(wèi)标準呢？這是因為(wèi)浏覽器(qì)軟件開(kāi)發中存在的技(jì)術(shù)缺陷。一般來(lái)說火(huǒ)狐浏覽器(qì)和(hé)chrome對css的解析是正确的，而ie則存在一些(xiē)bug，我們總不能以一個(gè)錯誤的标準去修正我們的行(xíng)為(wèi)。所以我們首先用火(huǒ)狐或者google chrome浏覽器(qì)來(lái)将網頁的css樣式設置好，然後對ie的各版本設置css兼容。
ie的各個(gè)版本中，低(dī)于ie6的版本幾乎沒有(yǒu)什麽人(rén)在用，可(kě)以将其忽略，那(nà)麽我們設置css浏覽器(qì)兼容的對象就集中在ie6~ie9。我們可(kě)以通(tōng)過以下方式來(lái)分别對不同浏覽器(qì)設置css:
1、條件注釋
在</head>标記之前插入隻對ie浏覽器(qì)适用的條件注釋代碼。
1<!--[if lt IE 7]>版本小(xiǎo)于IE7将看到這行(xíng)<![endif]-->
2<!--[if lte IE 7]>版本小(xiǎo)于或等于IE7将看到這行(xíng)<![endif]-->
3<!--[if IE 7]>版本如果是IE7将看到這行(xíng)<![endif]-->
4<!--[if gt IE 7]>版本大(dà)于IE7将看到這行(xíng)<![endif]-->
lt（小(xiǎo)于）、gt（大(dà)于）、lte（小(xiǎo)于或等于）、gte（大(dà)于或等于）
實例代碼：
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 及低(dī)于IE8版本 */
*background: green; /* IE 7 及低(dī)于IE7版本 */
-background: blue; /* IE 6 */
}
3、針對google chrome浏覽器(qì)的css hack:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/ * 針對Google Chrome、Safari 3.0、Opera 9 的CSS樣式 * /
}
4、針對firefox浏覽器(qì)的css hack:
@-moz-document url-prefix(){
/ * 針對firefox的CSS樣式 * /
}
企業網站(zhàn)咨詢