代碼兼容：IE7及以上，360瀏覽器，搜狗瀏覽器，谷歌，火狐，歐朋等等。
一．需要注意的地方：
1.寫好標准頭：<!DOCTYPE html>
2.首先引入初始化css,保證消除不同瀏覽器的細微差別。
<link rel="stylesheet" href="css/style.css">
具體內容：
*{margin:0;padding:0;}
body{font-size:12px;line-height:25px;font-family:Arial,Helvetica,"Microsoft YaHei","SimSun",sans-serif;color:#606060;background:#f6f6f6;padding:0;margin:0;position:relative;text-align:justify;text-justify:newspaper;}
img{border:none;}
a{outline:none;}
a:link{text-decoration:none;color:#606060;}
a:visited{text-decoration:none;color:#606060;}
a:hover{text-decoration:underline;color:#ff5600;}
input{margin:0;padding:0;outline:none;background:#fff;font-size:12px;color:#606060;border:1px solid #ddd;}
input[type='submit'], input[type='reset'],input[type='button'],button{cursor:pointer;border:none;-webkit-appearance:none;}
textarea{outline:none;resize:none;font-size:12px;border:1px solid #ddd;}
ul, ol, li{list-style-type:none;}
.clr{display:block;clear:both;}
.clearfix{display:block;content:"";clear:both;overflow:hidden;}
3.PC端 H5新標簽盡量不用，比如header,footer,nav。
4.CSS選擇器 nth-of-type不使用。
二．針對IE低版本瀏覽器及其他
CSS Hack大致有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。
（1）前綴
當一些CSS3樣式語法還存在波動時，它們提供針對瀏覽器的前綴。現在主要流行的瀏覽器內核主要有：
Trident內核：主要代表為IE瀏覽器
Gecko內核：主要代表為Firefox
Presto內核：主要代表為Opera
Webkit內核：產要代表為Chrome和Safari
而這些不同內核的瀏覽器，CSS3屬性（部分需要添加前綴的屬性）對應需要添加不同的前綴，也將其稱之為瀏覽器的私有前綴，添加上私有前綴之后的CSS3屬性可以說是對應瀏覽器的私有屬性：
Trident內核：前綴為-ms
Gecko內核：前綴為-moz
Presto內核：前綴為-o
Webkit內核：前綴為-webkit
例如：
.box{
-webkit-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotateY(0deg);
}
（2）css hack
1.IE6：_
2.IE6/7：*
3.IE7/Firefox：!important
4.IE7：*+
5.IE6/7/8：\9
6.IE8：\0
例如：
.hack{
/*demo1 注意順序，否則IE6/7下可能無法正確顯示，導致結果顯示為白色背景*/
/* All browsers */
background-color:blue !important;/* All browsers but IE6 */
* /* IE6, IE7 */
+background-color:yellow;/* IE6, IE7*/
/* IE6, IE7, IE8, IE9, IE10 */
background-color:purple\0; /* IE8, IE9, IE10 */
/*IE9, IE10*/
_background-color:green; /* Only works in IE6 */
}
（3）條件hack
1.IE7以下版本：<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
2.IE7：<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
3.IE8：<!--[if IE 8]> <html class="no-js lt-ie9"><![endif]-->
4.IE8以上：<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
360瀏覽器：
360瀏覽器使用兼容模式打開
在head里加上：
<meta name='renderer'content='webkit|ie-comp|ie-stand' />
<meta http-equiv="X-UA-Compatible" content="IE=IE7，chrome=1">
三．具體方法
1.背景透明問題
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
.box{filter:alpha(opacity=50);-moz-opacity:0.5; opacity:0.5;}
2.不同瀏覽器的標簽默認的外補丁和內補丁不同
問題症狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
解決方案：css里 *{margin:0;padding:0;}
備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的css文件開頭都會用通配符*來設置各個標簽的內外補丁是0。
3.設置較小高度標簽（一般小於10px），在ie6，ie7，遨游中高度超出自己設置高度
問題症狀：ie6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度
解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小於你設置的高度。
備注：這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是ie8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。
4.圖片默認有間距
問題症狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。
解決方案：使用float屬性為img布局
備注：因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道。
5.IE浮動 margin產生的雙倍距離
#box {
float:left;
width:100px;
margin:0 0 0 100px; //這種情況之下IE會產生200px的距離
display:inline; //使浮動忽略
}
6.文字陰影（CSS3）
.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }
7.Box陰影(CSS3)
.box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }
8.Margin不一致的問題：
當有多張圖片需要排在一行時，我們通常使用“Float：Left”來實現，這樣一來，瀏覽器就存在兼容性問題。導致圖片與后面的內容存在margin不一致的問題。對此一種解決方法就是給圖片添加“Display：inline”項即可。