代碼兼容：IE7及以上，360瀏覽器，搜狗瀏覽器，谷歌，火狐，歐朋等等。
一．需要注意的地方：
1.寫好標(biāo)準(zhǔn)頭：
2.首先引入初始化css,保證消除不同瀏覽器的細(xì)微差別。
具體內(nèi)容：
*{:0;:0;}
body{font-size:12px;line-:25px;font-:Arial,,“ YaHei”,“”,sans-serif;color:#;:#;:0;:0;:;text-align:;text-:;}
img{:none;}
a{:none;}
a:link{text-:none;color:#;}
a:{text-:none;color:#;}
a:hover{text-:;color:#;}
input{:0;:0;:none;:#fff;font-size:12px;color:#;:1px solid #ddd;}
input[type=‘’], input[type=‘reset’],input[type=‘’],{:;:none;--:none;}
{:none;:none;font-size:12px;:1px solid #ddd;}
ul, ol, li{list-style-type:none;}
.clr{:block;clear:both;}
.{:block;:"";clear:both;:;}
3.PC端 H5新標(biāo)簽盡量不用，比如,,nav。
4.CSS選擇器 nth-of-type不使用。
二．針對(duì)IE低版本瀏覽器及其他
CSS Hack大致有3種表現(xiàn)形式，CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實(shí)際項(xiàng)目中CSS Hack大部分是針對(duì)IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。
（1）前綴
當(dāng)一些CSS3樣式語法還存在波動(dòng)時(shí)，它們提供針對(duì)瀏覽器的前綴。現(xiàn)在主要流行的瀏覽器內(nèi)核主要有：
內(nèi)核：主要代表為IE瀏覽器
Gecko內(nèi)核：主要代表為
內(nèi)核：主要代表為Opera
內(nèi)核：產(chǎn)要代表為和
而這些不同內(nèi)核的瀏覽器瀏覽器兼容性問題面試，CSS3屬性（部分需要添加前綴的屬性）對(duì)應(yīng)需要添加不同的前綴瀏覽器兼容性問題面試，也將其稱之為瀏覽器的私有前綴，添加上私有前綴之后的CSS3屬性可以說是對(duì)應(yīng)瀏覽器的私有屬性：
內(nèi)核：前綴為-ms
Gecko內(nèi)核：前綴為-moz
內(nèi)核：前綴為-o
內(nèi)核：前綴為-
例如：
.box{
--:(0deg);
-moz-:(0deg);
-ms-:(0deg);
-o-:(0deg);
:(0deg);
}
（2）css hack
1.IE6：_
2.IE6/7：*
3.IE7/：!
4.IE7：+
5.IE6/7/8：\9
6.IE8：\0
例如：
.hack{
/demo1 注意順序，否則IE6/7下可能無法正確顯示，導(dǎo)致結(jié)果顯示為白色背景/
/ All /
-color:blue !;/ All but IE6 /
* / IE6, IE7 /
+-color:;/ IE6, IE7*/
/* IE6, IE7, IE8, IE9, IE10 /
-color:\0; / IE8, IE9, IE10 /
/IE9, IE10/
-color:green; / Only works in IE6 */
}
（3）條件hack
1.IE7以下版本：
2.IE7：
3.IE8：
4.IE8以上：
360瀏覽器：
360瀏覽器使用兼容模式打開
在head里加上：
1.背景透明問題
IE: : alpha(=10);
FF: :0.6;
FF: -moz-:0.10;
.box{:alpha(=50);-moz-:0.5; :0.5;}
2.不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同
問題癥狀：隨便寫幾個(gè)標(biāo)簽，不加樣式控制的情況下，各自的 和差異較大。
解決方案：css里 {:0;:0;}
備注：這個(gè)是最常見的也是最易解決的一個(gè)瀏覽器兼容性問題，幾乎所有的css文件開頭都會(huì)用通配符來設(shè)置各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁是0。
3.設(shè)置較小高度標(biāo)簽（一般小于10px），在ie6，ie7，遨游中高度超出自己設(shè)置高度
問題癥狀：ie6、7和遨游里這個(gè)標(biāo)簽的高度不受控制，超出自己設(shè)置的高度
解決方案：給超出高度的標(biāo)簽設(shè)置:;或者設(shè)置行高line- 小于你設(shè)置的高度。
備注：這種情況一般出現(xiàn)在我們?cè)O(shè)置小圓角背景的標(biāo)簽里。出現(xiàn)這個(gè)問題的原因是ie8之前的瀏覽器都會(huì)給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度。即使你的標(biāo)簽是空的，這個(gè)標(biāo)簽的高度還是會(huì)達(dá)到默認(rèn)的行高。
4.圖片默認(rèn)有間距
問題癥狀：幾個(gè)img標(biāo)簽放在一起的時(shí)候，有些瀏覽器會(huì)有默認(rèn)的間距，加了問題一中提到的通配符也不起作用。
解決方案：使用float屬性為img布局
備注：因?yàn)閕mg標(biāo)簽是行內(nèi)屬性標(biāo)簽，所以只要不超出容器寬度，img標(biāo)簽都會(huì)排在一行里，但是部分瀏覽器的img標(biāo)簽之間會(huì)有個(gè)間距。去掉這個(gè)間距使用float是正道。
5.IE中用浮動(dòng) 會(huì)產(chǎn)生雙倍距離
#box {
float:left;
width:100px;
:0 0 0 100px; //這種情況之下IE會(huì)產(chǎn)生200px的距離
:; //使浮動(dòng)忽略
}
6.文字陰影（CSS3）
.text { text-: 1px 1px 1px #666; : (Color=#, =135, =5); }
7.Box陰影(CSS3)
.box { box-: 5px 5px 5px #666; -moz-box-: 5px 5px 5px #666; --box-: 5px 5px 5px #666; }
8.不一致的問題：
當(dāng)有多張圖片需要排在一行時(shí)，我們通常使用“Float：Left”來實(shí)現(xiàn)，這樣一來，瀏覽器就存在兼容性問題。導(dǎo)致圖片與后面的內(nèi)容存在不一致的問題。對(duì)此一種解決方法就是給圖片添加“：”項(xiàng)即可