欧美日韩视频一区二区三区_長(cháng)沙做網(wǎng)站-怎么讓網(wǎng)站兼容各種瀏覽器的的css編寫(xiě)方法|長(cháng)沙做網(wǎng)站_長(cháng)沙做小程序_長(cháng)沙做小程序的公司_長(cháng)沙斌網(wǎng)網(wǎng)絡(luò )

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

以上是主要的在IE下的BUG，具體問(wèn)題要具體解決

css  (ie6,ie7,ie8,firefox)

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

書(shū)寫(xiě)順序，一般是將識別能力強的瀏覽器的CSS寫(xiě)在后面。下面列舉常用的CSS 方法
1：!important
!important作用是提高指定樣式規則的應用優(yōu)先權。
IE7以及所有標準瀏覽器能識別!important
區別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都能識別*；標準瀏覽器(如火狐)不能識別*
區別IE6與火狐
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
}
區別IE7與火狐
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
}
區別IE7，IE6與火狐
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F !important;
*border:20px solid ###;
}
3：_
IE6支持下劃線(xiàn)，IE7和firefox均不支持下劃線(xiàn)
區別IE7，IE6與火狐
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
_border:20px solid ###;
}
/*不管是什么方法，書(shū)寫(xiě)的順序都是firefox的寫(xiě)在前面，IE7的寫(xiě)在中間，IE6的寫(xiě)在最后面*/
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  專(zhuān)屬I(mǎi)E8的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后會(huì )導致 width和height 增加, 但IE不會(huì ).(可用!important解決)
2)垂直居中，將 line-height設置為當前div相同的高度, 再通過(guò)vertical-align: middle；( 注意內容不要換行)
3)水平居中，margin:0 auto;(當然不是萬(wàn)能)
4)若需給a標簽內內容加上樣式, 需要設置 display: block;(常見(jiàn)于導航標簽)
5)浮動(dòng)IE產(chǎn)生的雙倍距離
在IE下，當一個(gè)div設置了float后，然后給他設置margin，就會(huì )出現加倍的margin，解決的辦法是給div設置 display:inline。
<div id=”float”></div>
相應的css為
#float
{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/
}
Block元素的特點(diǎn)是:總是在新行上開(kāi)始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點(diǎn)是:和其他元素在同一行上,...不可控制(內嵌元素);
6)IE和FF對盒模型的解釋區別
#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內。
如果有BOX{WIDTH:"300"; PADDING:"5PX";}
則BOX在IE的寬度應該為:310
而在FF的寬度則是300
所以在BOX有填充的情況下應該這樣使用
BOX{WIDTH:"300" !IMPORTANT; WIDTH:"290";}
7)ul標簽在 FF下面默認有list-style和padding, 最好事先聲明, 以避免不必要的麻煩;(常見(jiàn)于導航標簽和內容列表)
8)作為外部wrapper的div不要定死高度, 最好還加上 overflow: hidden;以達到高度自適應;
9)頁(yè)面的最小寬度
min-width是個(gè)非常方便的CSS命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就能保證排版一直正確。但IE不認得這個(gè)，
而它實(shí)際上把width當做最小寬度來(lái)使。為了讓這一命令在IE上也能用，可以把一個(gè)<div> 放到 <body> 標簽下，然后為div指定一個(gè)類(lèi)：
然后CSS這樣設計：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一個(gè)min-width是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會(huì )讓你的HTML文檔不太正規。它實(shí)際上通過(guò)Javascript的判斷來(lái)實(shí)現最小寬度。
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 作為平臺, 只要代碼寫(xiě)得夠標準, 其實(shí)要 Hack 的地方不會(huì )很多的, IE 以外的瀏覽器幾乎都不會(huì )有問(wèn)題, 所以可以暫時(shí)忽略, 順序如下:
Firefox -> IE6 -> IE7 -> 其他
Hack 的方法
說(shuō)到方法有兩種, 一種是在不同文件中處理, 另一種則是在同一個(gè)文件中處理. 其實(shí)作用是相同的, 只是出發(fā)點(diǎn)不一樣而已.
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 方法, 但我迄今還沒(méi)遇到過(guò) Firefox 正常, IE 以外的其他瀏覽器不正常的情況, 所以無(wú)可分享. 只要代碼規范, 相信這種情況的發(fā)生應該是很罕見(jiàn) (JavaScript 除外).
2. 不同文件中處理.
為什么同一文件中可以處理還要寫(xiě)在多個(gè)文件里面針對不同的瀏覽器? 這是為了欺騙 W3C 的驗證工具, 其實(shí)只需要兩個(gè)文件, 一個(gè)是針對所有瀏覽器的, 一個(gè)只為 IE 服務(wù). 將所有符合 W3C 的代碼寫(xiě)到一個(gè)里面去, 而一些 IE 中必須的, 又不能通過(guò) W3C 驗證的代碼 (如: cursor:hand;) 放到另一個(gè)文件中, 再用下面的方法導入.

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



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

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

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

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

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

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

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

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

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

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

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