資訊中心 / NEWS

新聞中心精辟網(wǎng)文網(wǎng)絡(luò)營(yíng)銷建站知識(shí) 網(wǎng)站建設(shè)信息化 SEO網(wǎng)絡(luò)推廣合作客戶與伙伴做網(wǎng)站解決方案網(wǎng)站維護(hù)與安全

地址：長(zhǎng)沙市韶山南路248號(hào)南園503
室(瀟湘晨報(bào)旁)
電話：0731-88571521
手機(jī)：136-3748-2004
Q Q：44377655 522392221
網(wǎng)址：www.ahxywl.com.cn
郵箱：522392221@qq.com

網(wǎng)站建設(shè)信息化

長(zhǎng)沙做網(wǎng)站聯(lián)系電話：0731-88571521 13637482004

長(zhǎng)沙做網(wǎng)站-怎么讓網(wǎng)站兼容各種瀏覽器的的css編寫方法

信息來(lái)源：長(zhǎng)沙做網(wǎng)站發(fā)布時(shí)間：2013-12-31 瀏覽：

IE6，IE7，IE8，F(xiàn)irefox 兼容的問題有很多，天也網(wǎng)絡(luò)在開發(fā)過程中不斷總結(jié)。
最主要的IE下的BUG：
斷頭臺(tái)
躲躲貓
消失的 margin-bottom
雙空白邊浮動(dòng)
相對(duì)容器中的絕對(duì)定位
重復(fù)字符
3像素文本偏移

以上是主要的在IE下的BUG，具體問題要具體解決

css  (ie6,ie7,ie8,firefox)

IE6能識(shí)別下劃線"_"和星號(hào)" * "，IE7能識(shí)別星號(hào)" * "，但不能識(shí)別下劃線"_"，IE8能識(shí)別"
\9"，但不能識(shí)別下劃線"_"，而firefox兩個(gè)都不能認(rèn)識(shí),卻可以識(shí)別‘!important’。等等

書寫順序，一般是將識(shí)別能力強(qiáng)的瀏覽器的CSS寫在后面。下面列舉常用的CSS 方法
1：!important
!important作用是提高指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)。
IE7以及所有標(biāo)準(zhǔn)瀏覽器能識(shí)別!important
區(qū)別IE6與IE7與其他瀏覽器
.browserTest
{
border:20px solid #60A179 !important;
border:20px solid #00F;
}
在Mozilla中或者IE7瀏覽時(shí)候，能夠理解!important的優(yōu)先級(jí)，因此顯示#60A179的顏色：
在IE6中瀏覽時(shí)候，不能夠理解!important的優(yōu)先級(jí)，因此顯示#00F的顏色：
2：*
IE都能識(shí)別*；標(biāo)準(zhǔn)瀏覽器(如火狐)不能識(shí)別*
區(qū)別IE6與火狐
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
}
區(qū)別IE7與火狐
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
}
區(qū)別IE7，IE6與火狐
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F !important;
*border:20px solid ###;
}
3：_
IE6支持下劃線，IE7和firefox均不支持下劃線
區(qū)別IE7，IE6與火狐
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
_border:20px solid ###;
}
/*不管是什么方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最后面*/
4：*+html 與 *html
*+html 與 *html 是IE特有的標(biāo)簽, firefox 暫不支持.而*+html 又為 IE7特有標(biāo)簽
.browserTest { width: 120px; }      /* FireFox fixed */
*html .browserTest { width: 80px;}  /* ie6 fixed */
*+html .browserTest { width: 60px;} /* ie7 fixed */

3：\9  專屬IE8的Hack

.browserTest { width: 120px\9; }      /* IE8 fixed */

注意:
*+html 對(duì)IE7的HACK 必須保證HTML頂部有如下聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
以下是一些常用的CSS兼容技巧

1)火狐下給div設(shè)置padding后會(huì)導(dǎo)致 width和height 增加, 但I(xiàn)E不會(huì).(可用!important解決)
2)垂直居中，將 line-height設(shè)置為當(dāng)前div相同的高度, 再通過vertical-align: middle；( 注意內(nèi)容不要換行)
3)水平居中，margin:0 auto;(當(dāng)然不是萬(wàn)能)
4)若需給a標(biāo)簽內(nèi)內(nèi)容加上樣式, 需要設(shè)置 display: block;(常見于導(dǎo)航標(biāo)簽)
5)浮動(dòng)IE產(chǎn)生的雙倍距離
在IE下，當(dāng)一個(gè)div設(shè)置了float后，然后給他設(shè)置margin，就會(huì)出現(xiàn)加倍的margin，解決的辦法是給div設(shè)置 display:inline。
<div id=”float”></div>
相應(yīng)的css為
#float
{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/
}
Block元素的特點(diǎn)是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點(diǎn)是:和其他元素在同一行上,...不可控制(內(nèi)嵌元素);
6)IE和FF對(duì)盒模型的解釋區(qū)別
#browserTest{ width: 650px !important;width: 648px;padding-left:2px;background:#fff; }
browserTest顯示的寬度是650px；
IE Box的總寬度是:width+padding+border+margin寬度總和；
FF Box的總寬度就是:width的寬度，padding+border+margin的寬度在含在width內(nèi)。
如果有BOX{WIDTH:"300"; PADDING:"5PX";}
則BOX在IE的寬度應(yīng)該為:310
而在FF的寬度則是300
所以在BOX有填充的情況下應(yīng)該這樣使用
BOX{WIDTH:"300" !IMPORTANT; WIDTH:"290";}
7)ul標(biāo)簽在 FF下面默認(rèn)有l(wèi)ist-style和padding, 最好事先聲明, 以避免不必要的麻煩;(常見于導(dǎo)航標(biāo)簽和內(nèi)容列表)
8)作為外部wrapper的div不要定死高度, 最好還加上 overflow: hidden;以達(dá)到高度自適應(yīng);
9)頁(yè)面的最小寬度
min-width是個(gè)非常方便的CSS命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就能保證排版一直正確。但I(xiàn)E不認(rèn)得這個(gè)，
而它實(shí)際上把width當(dāng)做最小寬度來(lái)使。為了讓這一命令在IE上也能用，可以把一個(gè)<div> 放到 <body> 標(biāo)簽下，然后為div指定一個(gè)類：
然后CSS這樣設(shè)計(jì)：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一個(gè)min-width是正常的；但第2行的width使用了Javascript，這只有IE才認(rèn)得，這也會(huì)讓你的HTML文檔不太正規(guī)。它實(shí)際上通過Javascript的判斷來(lái)實(shí)現(xiàn)最小寬度。
10:萬(wàn)能float閉合
將以下代碼加入Global CSS 中,給需要閉合的div加上
<style>
/* Clear Fix */
.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
*html .clearfix{
height:1%;
}
*+html .clearfix{
height:1%;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block；}
/* End hide from IE Mac */
/* end of clearfix */
</style>
/**********************************************/
<div id="wrap">
<div class="column_left">
<h1>Float left</h1>
</div>
<div class="column_right">
<h1>Float right</h1>
</div>
</div>
#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;}
.column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}

Hack 的順序
使用 Firefox 作為平臺(tái), 只要代碼寫得夠標(biāo)準(zhǔn), 其實(shí)要 Hack 的地方不會(huì)很多的, IE 以外的瀏覽器幾乎都不會(huì)有問題, 所以可以暫時(shí)忽略, 順序如下:
Firefox -> IE6 -> IE7 -> 其他
Hack 的方法
說(shuō)到方法有兩種, 一種是在不同文件中處理, 另一種則是在同一個(gè)文件中處理. 其實(shí)作用是相同的, 只是出發(fā)點(diǎn)不一樣而已.
1. 同一文件中處理.
如: id="bgcolor" 的控件要在 IE6 中顯示藍(lán)色, IE7 中顯示綠色, Firefox 等其他瀏覽器中顯示紅色.
#bgcolor {
background:red !important; /* Firefox 等其他瀏覽器 */
background:blue; /* IE6 */
}
*+html #bgcolor {
background:green !important; /* IE7 */
}

IE6 不認(rèn) !important, 也不認(rèn) *+html. 所以 IE6 只能是 blue.
IE7 認(rèn) !important, 也認(rèn) *+html, 優(yōu)先度: (*+html + !important) > !important > +html. IE7 可以是 red, blue 和 green, 但 green 的優(yōu)先度最高.
Firefox 和其他瀏覽器都認(rèn) !important. !important 優(yōu)先, Firefox 可以是 red 和 blue, 但 red 優(yōu)先度高.
上述的優(yōu)先符號(hào)均是 CSS3 標(biāo)準(zhǔn)允許的, 其他瀏覽器也還有其他的 Hack 方法, 但我迄今還沒遇到過 Firefox 正常, IE 以外的其他瀏覽器不正常的情況, 所以無(wú)可分享. 只要代碼規(guī)范, 相信這種情況的發(fā)生應(yīng)該是很罕見 (JavaScript 除外).
2. 不同文件中處理.
為什么同一文件中可以處理還要寫在多個(gè)文件里面針對(duì)不同的瀏覽器? 這是為了欺騙 W3C 的驗(yàn)證工具, 其實(shí)只需要兩個(gè)文件, 一個(gè)是針對(duì)所有瀏覽器的, 一個(gè)只為 IE 服務(wù). 將所有符合 W3C 的代碼寫到一個(gè)里面去, 而一些 IE 中必須的, 又不能通過 W3C 驗(yàn)證的代碼 (如: cursor:hand;) 放到另一個(gè)文件中, 再用下面的方法導(dǎo)入.

<link rel="stylesheet" href="style.css" type="text/css" />



瀏覽器的 CSS Hack 方法有很多, 比如 @import 引入, > 過濾等等方法, 但以上就是我用過的全部.
網(wǎng)頁(yè)前臺(tái)的兼容不應(yīng)該僅限于對(duì)過去的瀏覽器支持 (向前兼容), 更應(yīng)該對(duì)未來(lái)的瀏覽器服務(wù) (向后兼容). 因?yàn)闉g覽器的發(fā)展很快, 而經(jīng)常上網(wǎng)的人更新軟件的頻率是非常高的, 所以向后兼容的意義甚至比先前兼容還來(lái)得重要. 如何向后兼容呢? 只要符合標(biāo)準(zhǔn)你的網(wǎng)站就永遠(yuǎn)不會(huì)過時(shí) (IE 系列除外). 所以我的宗旨是盡量做到標(biāo)準(zhǔn), 不得已才 Hack, 并盡量使用比較簡(jiǎn)單的方法去解決.
CSS hack是指我們?yōu)榱思嫒莞鳛g覽器，而使用的特別的css定義技巧。這是國(guó)外摘來(lái)的一張CSS hack列表，顯示了各瀏覽器對(duì)css hack的支持程度，對(duì)我們制作兼容網(wǎng)頁(yè)非常有幫助。

補(bǔ)充：
.color{
background-color: #CC00FF; /*所有瀏覽器都會(huì)顯示為紫色*/
background-color: #FF0000\9; /*IE6、IE7、IE8會(huì)顯示紅色*/
*background-color: #0066FF; /*IE6、IE7會(huì)變?yōu)樗{(lán)色*/
_background-color: #009933; /*IE6會(huì)變?yōu)榫G色*/
}
好多css hack，最重要的是簡(jiǎn)單實(shí)用能解決問題就行了
總結(jié)：
\9： IE6 IE7 IE8
*： IE6 IE7
_： IE6
*+： IE7（經(jīng)我測(cè)試沒多大用）
----------------------------------------
IE6，IE7，F(xiàn)irefox兼容的css hack
第一種辦法：
body
{
background:red;
*background:blue !important;(經(jīng)測(cè)試在IE里不使用)
*background: green;
}

第一排給Firefox以及其他瀏覽器看；
第二排給IE7,IE7既能識(shí)別*號(hào)，也能識(shí)別imp ortant；
第三排給IE6也能識(shí)別*號(hào)；
第二種辦法，使用_來(lái)區(qū)分IE6：
body
{
background:red;
*background:blue;
_background: green;
}

第一排給Firefox以及其他瀏覽器看；
第二排給IE7,IE7既能能識(shí)別*號(hào)；
第三排給IE6能識(shí)別下劃線；
CSS對(duì)瀏覽器器的兼容性具有很高的價(jià)值，通常情況下IE和Firefox存在很大的解析差異，這里介紹一下兼容要點(diǎn)。
常見兼容問題：
1.DOCTYPE 影響 CSS 處理(但這個(gè)聲明對(duì)于WEB標(biāo)準(zhǔn)的驗(yàn)證是非常重要的)
2.FF: div 設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中, IE 不行(已經(jīng)過時(shí))
　　3.FF: body 設(shè)置 text-align 時(shí), div 需要設(shè)置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 設(shè)置 padding 后, div 會(huì)增加 height 和 width, 但 IE 不會(huì), 故需要用 !imp ortant 多設(shè)一個(gè) height 和 width(IE也會(huì)增加，沒用！)
5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式（IE不會(huì)忽略！這誰(shuí)寫的沒用的東西�。�
　　6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行
7.cursor: pointer 可以同時(shí)在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以
8.FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯(cuò)位, 若不設(shè) height, 可以在 menubar 中插入一個(gè)空格。（這個(gè)沒看懂�。�
9.在mozilla firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：
div{margin:30px!important;margin:28px;}（這方法不使用！沒用！用*、-多好�。�
　　注意這兩個(gè)margin的順序一定不能寫反，據(jù)阿捷的說(shuō)法!important這個(gè)屬性 IE不能識(shí)別，但別的瀏覽器可以識(shí)別。所以在IE下其實(shí)解釋成這樣：
div{maring:30px;margin:28px}
重復(fù)定義的話按照最后一個(gè)來(lái)執(zhí)行，所以不可以只寫margin:XXpx!important;
10.IE5 和IE6的BOX解釋不一致
IE5下
div{width:300px;margin:0 10px 0 10px;}
div的寬度會(huì)被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以 300px+10px(右填充)+10px(左填充)=320px來(lái)計(jì)算的。這時(shí)我們可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
關(guān)于這個(gè)/**/是什么我也不太明白，只知道IE5和firefox都支持但I(xiàn)E6不支持，如果有人理解的話，請(qǐng)告訴我一聲，謝了�。海�
11.ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的,而在IE中只有margin有值所以先定義
ul{margin:0;padding:0;}
就能解決大部分問題（不只這一個(gè)吧！還有P，DL 等。。）
注意事項(xiàng)：
1、float的div一定要閉合。
例如：(其中floatA、floatB的屬性已經(jīng)設(shè)置為float:left;)
<#div id=”floatA” ></#div>
<#div id=”floatB” ></#div>
<#div id=”NOTfloatC” ></#div>
這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。
這段代碼在IE中毫無(wú)問題，問題出在FF。原因是NOTfloatC并非float標(biāo)簽，必須將float標(biāo)簽閉合。
在
<#div class=”floatB”></#div>
<#div class=”NOTfloatC”></#div>
之間加上
<#div class=”clear”></#div>
這個(gè)div一定要注意聲明位置，一定要放在最恰當(dāng)?shù)牡胤剑冶仨毰c兩個(gè)具有float屬性的div同級(jí)，之間不能存在嵌套關(guān)系，否則會(huì)產(chǎn)生異常。
并且將clear這種樣式定義為為如下即可：
.clear{clear:both;}
此外，為了讓高度能自動(dòng)適應(yīng)，要在wrapper里面加上overflow:hidden;
當(dāng)包含float的box的時(shí)候，高度自動(dòng)適應(yīng)在IE6下無(wú)效，這時(shí)候應(yīng)該觸發(fā)IE的layout私有屬性(萬(wàn)惡的IE�。�)用zoom:1;可以做到，這樣就達(dá)到了兼容。
例如某一個(gè)wrapper如下定義：
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
　2、margin加倍的問題。
設(shè)置為float的div在ie6下設(shè)置的margin會(huì)加倍。這是一個(gè)ie6都存在的bug。
解決方案是在這個(gè)div里面加上display:inline;
例如：
<#div id=”imfloat”></#div>
相應(yīng)的css為
#IamFloat{
float:left;
margin:5px;/*IE6下理解為10px*/
display:inline;/*IE6下再理解為5px*/}
　   3、關(guān)于容器的包涵關(guān)系
很多時(shí)候，尤其是容器內(nèi)有平行布局，例如兩、三個(gè)float的div時(shí)，寬度很容易出現(xiàn)問題。在IE中，外層的寬度會(huì)被內(nèi)層更寬的div擠破。一定要用Photoshop或者Firework量取像素級(jí)的精度。
　　4、關(guān)于高度的問題
如果是動(dòng)態(tài)地添加內(nèi)容，高度最好不要定義。瀏覽器可以自動(dòng)伸縮，然而如果是靜態(tài)的內(nèi)容，高度最好定好。（似乎有時(shí)候不會(huì)自動(dòng)往下?lián)伍_，不知道具體怎么回事）
　　5、最狠的手段 - !important;
如果實(shí)在沒有辦法解決一些細(xì)節(jié)問題,可以用這個(gè)方法.FF對(duì)于”!important”會(huì)自動(dòng)優(yōu)先解析,然而IE則會(huì)忽略.如下
.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
值得注意的是，一定要將xxxx !important 這句放置在另一句之上，上面已經(jīng)提過
IE瀏覽器都能識(shí)別“*” “\9”;標(biāo)準(zhǔn)瀏覽器(如FF)不能識(shí)別“*”；

IE6能識(shí)別“_” “+” “#” “@”, 同一屬性有兩個(gè)的只看后者無(wú)論有沒有如果是兩句它就能識(shí)別“!important”;
IE7能識(shí)別“+” “#” “@” “!important”，不能識(shí)別“_”;
FF能識(shí)別“!important”，不能識(shí)別“_” “+” “#” “@”;

以上是我自己測(cè)試的結(jié)果，如有差錯(cuò)還請(qǐng)指出~！

注：不管是什么方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最后面。

例如：select{
Color：blue；//所有瀏覽器
Color：yellow\9；//所有IE瀏覽器
*Color：red；//forIE7
_color：green；//forIE6
}
關(guān)注過IE8的css hack的人相信大家都在使用這個(gè)hack，就是“\9”的css hack：

其中：OP表示Opera，SA表示Safari，Ch表示Chrome；當(dāng)然你如果還有耐心可以測(cè)試 “\14”，“\15”，“\16”。。。
從上面測(cè)試結(jié)果我們可以看出“\0”的寫法只被IE8識(shí)別，ie6，ie7都不能識(shí)別，那么“\0”應(yīng)該是IE8的真正hack。主流瀏覽器的CSS hack這樣更好一些：
.test{
color:#000000; /* FF,OP支持 */
color:#0000FF\0; /* IE8支持*/
[color:#000000;color:#00FF00; /* SF,CH支持 */
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */
}
其中：OP表示Opera，SA表示Safari，Ch表示Chrome；
關(guān)注過IE8的css hack的人相信大家都在使用這個(gè)hack，就是“\9”的css hack：
.test{
color:#000000; /* FF,OP支持 */
color:#0000FF\9; /* 所有IE瀏覽器(ie6+)支持；但是IE8不能識(shí)別“*”和“_”的css hack；所以我們可以這樣寫hack */
[color:#000000;color:#00FF00; /* SF,CH支持 */
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */
}

color:#0000FF\9的hack支持IE6-IE8（其他版本沒有測(cè)試），但是IE8不能識(shí)別“*”和 “_”的css hack，所以我們可以使用
color:#0000FF\9; ;/*ie6,ie7,ie8*/
*color:#FFFF00;/*ie7*/
_color:#FF0000;/*ie6*/
來(lái)區(qū)分IE的各個(gè)版本。
說(shuō)到了這個(gè)\/* SF,CH支持 *\/經(jīng)過天也網(wǎng)絡(luò)測(cè)試，這個(gè)ie系列都支持，而且ff會(huì)把他解析為上下top和bottom，從而影響以上兩個(gè)地方的位置。

相關(guān)熱點(diǎn)文章