長沙做網(wǎng)站-怎么讓網(wǎng)站兼容各種瀏覽器的的css編寫方法|長沙做網(wǎng)站_長沙做小程序_長沙做小程序的公司_長沙斌網(wǎng)網(wǎng)絡(luò)

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

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

css  (ie6,ie7,ie8,firefox)

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

書寫順序，一般是將識別能力強(qiáng)的瀏覽器的CSS寫在后面。下面列舉常用的CSS 方法
1：!important
!important作用是提高指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)。
IE7以及所有標(biāo)準(zhǔn)瀏覽器能識別!important
區(qū)別IE6與IE7與其他瀏覽器
.browserTest
{
border:20px solid #60A179 !important;
border:20px solid #00F;
}
在Mozilla中或者IE7瀏覽時(shí)候，能夠理解!important的優(yōu)先級，因此顯示#60A179的顏色：
在IE6中瀏覽時(shí)候，不能夠理解!important的優(yōu)先級，因此顯示#00F的顏色：
2：*
IE都能識別*；標(biāo)準(zhǔn)瀏覽器(如火狐)不能識別*
區(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 對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后會導(dǎo)致 width和height 增加, 但I(xiàn)E不會.(可用!important解決)
2)垂直居中，將 line-height設(shè)置為當(dāng)前div相同的高度, 再通過vertical-align: middle；( 注意內(nèi)容不要換行)
3)水平居中，margin:0 auto;(當(dāng)然不是萬能)
4)若需給a標(biāo)簽內(nèi)內(nèi)容加上樣式, 需要設(shè)置 display: block;(常見于導(dǎo)航標(biāo)簽)
5)浮動IE產(chǎn)生的雙倍距離
在IE下，當(dāng)一個(gè)div設(shè)置了float后，然后給他設(shè)置margin，就會出現(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對盒模型的解釋區(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)頁面的最小寬度
min-width是個(gè)非常方便的CSS命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就能保證排版一直正確。但I(xiàn)E不認(rèn)得這個(gè)，
而它實(shí)際上把width當(dāng)做最小寬度來使。為了讓這一命令在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)得，這也會讓你的HTML文檔不太正規(guī)。它實(shí)際上通過Javascript的判斷來實(shí)現(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 作為平臺, 只要代碼寫得夠標(biāo)準(zhǔn), 其實(shí)要 Hack 的地方不會很多的, IE 以外的瀏覽器幾乎都不會有問題, 所以可以暫時(shí)忽略, 順序如下:
Firefox -> IE6 -> IE7 -> 其他
Hack 的方法
說到方法有兩種, 一種是在不同文件中處理, 另一種則是在同一個(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)先符號均是 CSS3 標(biāo)準(zhǔn)允許的, 其他瀏覽器也還有其他的 Hack 方法, 但我迄今還沒遇到過 Firefox 正常, IE 以外的其他瀏覽器不正常的情況, 所以無可分享. 只要代碼規(guī)范, 相信這種情況的發(fā)生應(yīng)該是很罕見 (JavaScript 除外).
2. 不同文件中處理.
為什么同一文件中可以處理還要寫在多個(gè)文件里面針對不同的瀏覽器? 這是為了欺騙 W3C 的驗(yàn)證工具, 其實(shí)只需要兩個(gè)文件, 一個(gè)是針對所有瀏覽器的, 一個(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īng)該僅限于對過去的瀏覽器支持 (向前兼容), 更應(yīng)該對未來的瀏覽器服務(wù) (向后兼容). 因?yàn)闉g覽器的發(fā)展很快, 而經(jīng)常上網(wǎng)的人更新軟件的頻率是非常高的, 所以向后兼容的意義甚至比先前兼容還來得重要. 如何向后兼容呢? 只要符合標(biāo)準(zhǔn)你的網(wǎng)站就永遠(yuǎn)不會過時(shí) (IE 系列除外). 所以我的宗旨是盡量做到標(biāo)準(zhǔn), 不得已才 Hack, 并盡量使用比較簡單的方法去解決.
CSS hack是指我們?yōu)榱思嫒莞鳛g覽器，而使用的特別的css定義技巧。這是國外摘來的一張CSS hack列表，顯示了各瀏覽器對css hack的支持程度，對我們制作兼容網(wǎng)頁非常有幫助。

補(bǔ)充：
.color{
background-color: #CC00FF; /*所有瀏覽器都會顯示為紫色*/
background-color: #FF0000\9; /*IE6、IE7、IE8會顯示紅色*/
*background-color: #0066FF; /*IE6、IE7會變?yōu)樗{(lán)色*/
_background-color: #009933; /*IE6會變?yōu)榫G色*/
}
好多css hack，最重要的是簡單實(shí)用能解決問題就行了
總結(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對瀏覽器器的兼容性具有很高的價(jià)值，通常情況下IE和Firefox存在很大的解析差異，這里介紹一下兼容要點(diǎn)。
常見兼容問題：
1.DOCTYPE 影響 CSS 處理(但這個(gè)聲明對于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 會增加 height 和 width, 但 IE 不會, 故需要用 !imp ortant 多設(shè)一個(gè) height 和 width(IE也會增加，沒用！)
5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式（IE不會忽略！這誰寫的沒用的東西�。�
　　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ù)阿捷的說法!important這個(gè)屬性 IE不能識別，但別的瀏覽器可以識別。所以在IE下其實(shí)解釋成這樣：
div{maring:30px;margin:28px}
重復(fù)定義的話按照最后一個(gè)來執(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來計(jì)算的。這時(shí)我們可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
關(guān)于這個(gè)/**/是什么我也不太明白，只知道IE5和firefox都支持但I(xiàn)E6不支持，如果有人理解的話，請告訴我一聲，謝了�。海�
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中毫無問題，問題出在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ù)牡胤�，而且必須與兩個(gè)具有float屬性的div同級，之間不能存在嵌套關(guān)系，否則會產(chǎn)生異常。
并且將clear這種樣式定義為為如下即可：
.clear{clear:both;}
此外，為了讓高度能自動適應(yīng)，要在wrapper里面加上overflow:hidden;
當(dāng)包含float的box的時(shí)候，高度自動適應(yīng)在IE6下無效，這時(shí)候應(yīng)該觸發(fā)IE的layout私有屬性(萬惡的IE��！)用zoom:1;可以做到，這樣就達(dá)到了兼容。
例如某一個(gè)wrapper如下定義：
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
　2、margin加倍的問題。
設(shè)置為float的div在ie6下設(shè)置的margin會加倍。這是一個(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中，外層的寬度會被內(nèi)層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。
　　4、關(guān)于高度的問題
如果是動態(tài)地添加內(nèi)容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態(tài)的內(nèi)容，高度最好定好。（似乎有時(shí)候不會自動往下?lián)伍_，不知道具體怎么回事）
　　5、最狠的手段 - !important;
如果實(shí)在沒有辦法解決一些細(xì)節(jié)問題,可以用這個(gè)方法.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”;標(biāo)準(zhǔn)瀏覽器(如FF)不能識別“*”；

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

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

注：不管是什么方法，書寫的順序都是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)然你如果還有耐心可以測試 “\14”，“\15”，“\16”。。。
從上面測試結(jié)果我們可以看出“\0”的寫法只被IE8識別，ie6，ie7都不能識別，那么“\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不能識別“*”和“_”的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的各個(gè)版本。
說到了這個(gè)\/* SF,CH支持 *\/經(jīng)過天也網(wǎng)絡(luò)測試，這個(gè)ie系列都支持，而且ff會把他解析為上下top和bottom，從而影響以上兩個(gè)地方的位置。

上一條：長沙做網(wǎng)站什么是虛擬主機(jī)?虛擬主機(jī)的作用，虛擬主機(jī)是怎么運(yùn)行和購買的
下一條：長沙做網(wǎng)站優(yōu)化不要盲目追求百度權(quán)重

99热精品在线,欧美精,自慰免费,国产亚洲无码一区