代码兼容：IE7及以上，360浏览器，搜狗浏览器，谷歌，火狐，欧朋等等。
一．需要注意的地方： 1.写好标准头： 2.首先引入初始化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以下版本： 2.IE7： 3.IE8： 4.IE8以上：
360浏览器： 360浏览器使用兼容模式打开 在head里加上：
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”项即可
