兼容性
兼容性：hack
1.瀏覽器兼容：ie:Trident，谷歌:Webkit，火狐:Gecko，
歐朋:Presto，safri
360分為兼容ie內核，急速webkit
2.ie是比較難調的：屬性，選擇符，註釋
比如IE6能識別下劃線”_”和星號” * “，IE7能識別星號” * “，但不能-。“-″減號是IE6專有的hack 。_color
只在IE下生效：
<!--[if IE]>
這段文字只在IE瀏覽器顯示
<![endif]-->
只在IE6下生效：
<!--[if IE 6]>
這段文字只在IE6瀏覽器顯示
<![endif]-->
解決方案：*{margin:0;padding:0;}
備註：不建議通配符*，css遍歷也是有代價的（雖說現代瀏覽器可以忽略）。可以寫全body,p,html,h1,h2,h3...{margin:0;padding:0;}
針對不同瀏覽器內核的兼容舉例：背景色漸變
解決方案：CSS3中-moz、-ms、-webkit和-o分別代表什麽意思
1、-moz-：代表FireFox瀏覽器私有屬性
2、-ms-：代表IE瀏覽器私有屬性
3、-webkit-：代表safari、chrome瀏覽器私有屬性
4、-o-：代表opera瀏覽器私有屬性
寫法：.gradient{
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); }
reset.css就是兼容各種瀏覽器。每個瀏覽器都有私有屬性
Ie7-8，ie9+ 分水嶺
1.舉例: 低版本下響應式媒體查詢的實現
解決方法：Respond.js
2.舉例：低版本下h5標簽、css3標簽不識別
解決方法：Html5shiv.js /modernizr.custom.js
具體寫法：
<!--[if lt IE9]>
<script src=html5shiv.js"></script>
<script src=respond.js"></script>
<script src=modernizr.custom.js"></script>
<![endif]-->
3.終極解決方案
$(document).ready(function() {
var u=navigator.userAgent.toLocaleLowerCase();
if(u.indexOf("msie 7.0")>-1|| if(u.indexOf("msie 8.0")>-1){
$("body").html("您當前的ie瀏覽器版本過低,請升級至ie8以上版本或使用其他瀏覽器");
}
});
4.具體解決方案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--[if lt IE9]>
<script src=lib/jian/html5shiv.js"></script>
<script src=lib/jian/respond.js"></script>
<script src=lib/jian/modernizr.custom.js"></script>
<![endif]-->
<script src="lib/jquery/jquery-3.1.1.min.js"></script>
<title>兼容性</title>
</head>
<body>
<script>
$(document).ready(function() {
var u=navigator.userAgent.toLocaleLowerCase();
console.log(u);
// if(u.indexOf("msie 7.0")>-1|| if(u.indexOf("msie 8.0")>-1){
// $("body").html("您當前的ie瀏覽器版本過低,請升級至ie8以上版本或使用其他瀏覽器");
// }
});
</script>
</body>
</html>
.在有的瀏覽器中，默認字體大小為12px,所以在設字體大小的時候，最小設為12px，如果在做的過程中，發現字體小於12，可直接作為圖片使用
2.a標簽對裏不能嵌套a標簽對
3.若給a標簽內的內容樣式加上樣式，需要設置display:block;（在IE中如果設置寬高會自動變成塊，在FF中則不會），但如果設置了float屬性，就不需要設置display:block。
4.ul，ol在FF默認情況下，有list-style-type樣式和padding值，dl在IE和FF默認情況下，有padding值，所以應該事先聲明ul,li,ol,dl,dd,dd{margin:0;padding:0}。
5.作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應
6.關於手形光標. cursor: pointer. 而hand 只適用於 IE.
7.css布局中的居中問題:在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容居中；對於IE這樣設定就已經可以了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上“margin-right: auto;margin-left: auto; ”需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個DIV裏，你可以依次拆出多個div，只要在每個拆出的div裏定義margin-right: auto;margin-left: auto; 就可以了。
8.浮動ie產生的雙倍距離
#box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會產生200px的距離，這時需要設置display:inline; //使浮動忽略}
9.如何居中一個浮動元素?
對其設置margin:x auto;
兼容性