代碼兼容：IE7及以上尸折，360瀏覽器，搜狗瀏覽器殷蛇，谷歌实夹，火狐，歐朋等等粒梦。
一．需要注意的地方：
1.寫好標(biāo)準(zhǔn)頭：
2.首先引入初始化css,保證消除不同瀏覽器的細(xì)微差別亮航。
??<link rel="stylesheet" href="css/style.css">
具體內(nèi)容：
*{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新標(biāo)簽盡量不用，比如header,footer,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)核主要有：
????Trident內(nèi)核：主要代表為IE瀏覽器
????Gecko內(nèi)核：主要代表為Firefox
????Presto內(nèi)核：主要代表為Opera
????Webkit內(nèi)核：產(chǎn)要代表為Chrome和Safari
而這些不同內(nèi)核的瀏覽器沦辙，CSS3屬性（部分需要添加前綴的屬性）對(duì)應(yīng)需要添加不同的前綴，也將其稱之為瀏覽器的私有前綴讹剔，添加上私有前綴之后的CSS3屬性可以說是對(duì)應(yīng)瀏覽器的私有屬性：
Trident內(nèi)核：前綴為-ms
Gecko內(nèi)核：前綴為-moz
Presto內(nèi)核：前綴為-o
Webkit內(nèi)核：前綴為-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下可能無法正確顯示，導(dǎo)致結(jié)果顯示為白色背景*/
???? /* 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.不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同
問題癥狀：隨便寫幾個(gè)標(biāo)簽陌兑，不加樣式控制的情況下，各自的margin 和padding差異較大由捎。
解決方案：css里 *{margin:0;padding: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è)置overflow:hidden;或者設(shè)置行高line-height 小于你設(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) margin產(chǎn)生的雙倍距離
#box {
float:left;
width:100px;
margin:0 0 0 100px; //這種情況之下IE會(huì)產(chǎn)生200px的距離
display:inline; //使浮動(dòng)忽略
}
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不一致的問題：
當(dāng)有多張圖片需要排在一行時(shí)永部，我們通常使用“Float：Left”來實(shí)現(xiàn)，這樣一來呐矾，瀏覽器就存在兼容性問題苔埋。導(dǎo)致圖片與后面的內(nèi)容存在margin不一致的問題。對(duì)此一種解決方法就是給圖片添加“Display：inline”項(xiàng)即可蜒犯。
.如果圖片加a標(biāo)簽在IE9-中會(huì)有邊框?
解決方案:
img{border:none;}
2.rgba不支持IE8
解決方案:可以用 opacity
?eg:
opacity:0.7;/*FF chrome safari opera*/?filter:alpha(opacity:70);/*用了ie濾鏡,可以兼容ie*/
但是,需要注意的是,opacity會(huì)影響里面元素的透明度
3.?display:inline-block?ie6/7不支持
解決方案:
display:inline-block;*display:inline;
4.默認(rèn)的body沒有body去掉margin情況下ie5组橄、6荞膘、7邊緣會(huì)很寬margin-top加倍 ?如果處于無聲明狀態(tài)那么所有的ie瀏覽器margin-top加倍
解決方案:用css給body添加magin屬性為0px
body{margin:0;}
5.IE 6.0 Firefox Opera等是?真實(shí)寬度=width+padding+border
IE5.X?真實(shí)寬度=width
解決方案:
方法1.?
div.content {?width:400px;?//這個(gè)是錯(cuò)誤的width(對(duì)于ie5來說是正確的),所有瀏覽器都讀到了 voice-family:?"/"}/""; //IE5.X/win忽略了"/"}/""后的內(nèi)容 voice-family:inherit; width:300px; //包括IE6/win在內(nèi)的部分瀏覽器讀到這句,新的數(shù)值(300px)覆蓋掉了舊的 }
方法2.?
div.content {?width:300px !important;?//這個(gè)是正確的width,大部分支持!important標(biāo)記的瀏覽器使用這里的數(shù)值 width(空格)/**/:400px;//IE6/win不解析這句,所以IE6/win仍然認(rèn)為width的值是300px;而IE5.X/win讀到這句,新的數(shù)值(400px)覆蓋掉了舊的,因?yàn)?important標(biāo)記對(duì)他們不起作用 }
6.height不能小于16px,設(shè)置較小高度標(biāo)簽(一般小于10px),在IE6,IE7,遨游中高度超出自己設(shè)置高度
解決方案:overflow設(shè)置為hidden
7.min-height不兼容 ?ie6 7解釋為超過高度就撐開,而其他版本瀏覽器則遮蓋下面的層
解決方案:min-height:200px; height:auto !important; height:200px; overflow:visible;
8.position:fixed ?IE5、6無法識(shí)別此屬性
解決方案:
9.浮動(dòng)的div有margin_left屬性ie6會(huì)加倍 ?無論兼容視圖還是無聲明視圖?
解決方案:
方案一: IE6唯一識(shí)別屬性_的方式加_display屬性_display:inline;
方案二:
條件注釋-->
.on{ display:inline }
10.cursor兼容 ?自定義指針cur格式的圖片url路徑問題無論是兼容還是無聲明版本
解決方案:cursor:url(Hand.cur), url(/Hand.cur), auto;
11.png圖片 ?IE6里面的png圖片不能透明 兼容版本和無聲明版本都是?
解決方案:
12.img浮動(dòng) ?img標(biāo)簽打回車會(huì)造成每個(gè)圖片之間有縫隙
解決方案:可以刪除之間的回車鍵也可以讓這些圖片浮動(dòng)
13.在IE瀏覽器下 input type="text"文本框點(diǎn)擊時(shí)后面會(huì)出現(xiàn)"X",以及type="password"后面會(huì)出現(xiàn)眼睛,如何除去這兩種默認(rèn)樣式:
::-ms-clear,::-ms-reveal{display:none;}
注:IE9-不識(shí)別
14.CSS3前綴 ?-webkit- ?webkit渲染引擎 ?chrome/safari
??-moz- ? gecko渲染引擎 ? firefox
? -ms- ? ?trident渲染引擎 ?IE
??-o- ? opeck渲染引擎 opera
動(dòng)畫玉工、過渡羽资、background-size 都需要加前綴
eg:?動(dòng)畫
@-webkit-keyframes name{?0%{動(dòng)畫開始的css樣式;}?100%{動(dòng)畫結(jié)束的css樣式;}?}-webkit-animation:name 8s infinite linear;
過渡:
div.box{ bottom:-40px;
-webkit-transition:all .3s ease-in-out 0s;}
注:但是過渡不兼容IE8-,可以用JS動(dòng)畫實(shí)現(xiàn)
background-size 同樣也不支持IE8,可以考慮用img
15.漸變
解決方案:
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#35FEA1,endColorStr=#6E9DFF);?/*IE 6 7 8*/background: -ms-linear-gradient(top, #35FEA1, #6E9DFF);/*?IE 10?*/?background:-moz-linear-gradient(top, #35FEA1, #6E9DFF);?/*火狐*/?background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/*谷歌*/?background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/*?Safari 4-5, Chrome 1-9*/?background: -webkit-linear-gradient(top, #35FEA1, #6E9DFF);/*Safari5.1 Chrome 10+*/?background: -o-linear-gradient(top, #35FEA1, #6E9DFF);/*Opera 11.10+*/
16.PIE.htc 可以實(shí)現(xiàn)很多css3屬性在IE下的兼容性 如:圓角、陰影遵班、漸變
(1) 圓角 border-radius
.signBtn{?height:?40px;?background-color:#08BCD2;?color:?#fff;?-webkit-border-radius:?3px;?-moz-border-radius:?3px;?border-radius:?3px;behavior:?url(css/PIE.htc);}
(2)陰影 box-shadow
.box{?width:200px;?height:200px;?-webkit-box-shadow:1px 0 10px;?-moz-box-shadow:1px 0 10px;?box-shadow:?1px 0 10px;?background-color:?#fff;?behavior:?url(css/PIE.htc);/*IE邊框陰影*/}
(3)背景透明rgba
.box{?background-color:rgba(12, 154, 171, 0.29);?behavior:?url(css/PIE.htc);?-pie-background:rgba(12, 154, 171, 0.29);}
(4)漸變
.box{?width:200px;?height:400px;?background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));?background:-moz-linear-gradient(#9F9, #393);?-pie-background:linear-gradient(#9F9, #393);?behavior:url(pie.htc); }
注:PIE.htc文件路徑相對(duì)是相對(duì)于css文件,并非html文件,以上例子是將PIE.htc文件放在與css樣式文件同一個(gè)文件夾css內(nèi),而對(duì)應(yīng)的html問價(jià)與css文件夾同級(jí)
17.JS實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)到指定位置
$(".arraw-bt").click(function(){?var scroll_offset = $("#section").offset(); console.log(scroll_offset); $("body,html").animate({//如果只寫body,只被chrome支持 只被chrome支持 Firefox和ie不支持 "scrollTop":scroll_offset.top },0);//此處0寫上會(huì)一下跳轉(zhuǎn)到指定位置,若不寫會(huì)有過渡效果 /});
