資訊中心 / NEWS

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

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

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

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

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

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

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

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

css  (ie6,ie7,ie8,firefox)

IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，IE8能識別"
\9"，但不能識別下劃線"_"，而firefox兩個都不能認識,卻可以識別‘!important’。等等

書寫順序，一般是將識別能力強的瀏覽器的CSS寫在后面。下面列舉常用的CSS 方法
1：!important
!important作用是提高指定樣式規(guī)則的應用優(yōu)先權(quán)。
IE7以及所有標準瀏覽器能識別!important
區(qū)別IE6與IE7與其他瀏覽器
.browserTest
{
border:20px solid #60A179 !important;
border:20px solid #00F;
}
在Mozilla中或者IE7瀏覽時候，能夠理解!important的優(yōu)先級，因此顯示#60A179的顏色：
在IE6中瀏覽時候，不能夠理解!important的優(yōu)先級，因此顯示#00F的顏色：
2：*
IE都能識別*；標準瀏覽器(如火狐)不能識別*
區(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特有的標簽, firefox 暫不支持.而*+html 又為 IE7特有標簽
.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 對IE7的HACK 必須保證HTML頂部有如下聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
以下是一些常用的CSS兼容技巧

1)火狐下給div設置padding后會導致 width和height 增加, 但IE不會.(可用!important解決)
2)垂直居中，將 line-height設置為當前div相同的高度, 再通過vertical-align: middle；( 注意內(nèi)容不要換行)
3)水平居中，margin:0 auto;(當然不是萬能)
4)若需給a標簽內(nèi)內(nèi)容加上樣式, 需要設置 display: block;(常見于導航標簽)
5)浮動IE產(chǎn)生的雙倍距離
在IE下，當一個div設置了float后，然后給他設置margin，就會出現(xiàn)加倍的margin，解決的辦法是給div設置 display:inline。
<div id=”float”></div>
相應的css為
#float
{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/
}
Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,...不可控制(內(nèi)嵌元素);
6)IE和FF對盒模型的解釋區(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的寬度應該為:310
而在FF的寬度則是300
所以在BOX有填充的情況下應該這樣使用
BOX{WIDTH:"300" !IMPORTANT; WIDTH:"290";}
7)ul標簽在 FF下面默認有l(wèi)ist-style和padding, 最好事先聲明, 以避免不必要的麻煩;(常見于導航標簽和內(nèi)容列表)
8)作為外部wrapper的div不要定死高度, 最好還加上 overflow: hidden;以達到高度自適應;
9)頁面的最小寬度
min-width是個非常方便的CSS命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。但IE不認得這個，
而它實際上把width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個<div> 放到 <body> 標簽下，然后為div指定一個類：
然后CSS這樣設計：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一個min-width是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規(guī)。它實際上通過Javascript的判斷來實現(xiàn)最小寬度。
10:萬能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 作為平臺, 只要代碼寫得夠標準, 其實要 Hack 的地方不會很多的, IE 以外的瀏覽器幾乎都不會有問題, 所以可以暫時忽略, 順序如下:
Firefox -> IE6 -> IE7 -> 其他
Hack 的方法
說到方法有兩種, 一種是在不同文件中處理, 另一種則是在同一個文件中處理. 其實作用是相同的, 只是出發(fā)點不一樣而已.
1. 同一文件中處理.
如: id="bgcolor" 的控件要在 IE6 中顯示藍色, IE7 中顯示綠色, Firefox 等其他瀏覽器中顯示紅色.
#bgcolor {
background:red !important; /* Firefox 等其他瀏覽器 */
background:blue; /* IE6 */
}
*+html #bgcolor {
background:green !important; /* IE7 */
}

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

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



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

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

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

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

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

以上是我自己測試的結(jié)果，如有差錯還請指出~！

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

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

其中：OP表示Opera，SA表示Safari，Ch表示Chrome；當然你如果還有耐心可以測試 “\14”，“\15”，“\16”。。。
從上面測試結(jié)果我們可以看出“\0”的寫法只被IE8識別，ie6，ie7都不能識別，那么“\0”應該是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的人相信大家都在使用這個hack，就是“\9”的css hack：
.test{
color:#000000; /* FF,OP支持 */
color:#0000FF\9; /* 所有IE瀏覽器(ie6+)支持；但是IE8不能識別“*”和“_”的css hack；所以我們可以這樣寫hack */
[color:#000000;color:#00FF00; /* SF,CH支持 */
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */
}

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

相關(guān)熱點文章