一、瀏覽器兼容
Internet Explorer (IE)
Safari (ios) ( Safari)
Mozilla Firfox (Firefox 火狐)
Google Chrome （Google）
Opera (Opera)
最早：Netscape Navigator
網景全頁航者（1994-2008 “NN”）
二、五大瀏覽器內核代表作品
Trident:
IE Maxthan, 騰訊，360，Theworld世界之窗；IE (MSHTML) 捆綁在windows中，只應用在windows平臺且不開源。
Gecko: Mozilla Firfox（火狐）開源的，優點：跨平臺
Presto: Opera公認渲染速度最快的引擎
Blink: Google & Opera (Software ) 聯合開發2013.4最新開發瀏覽器引擎版本、
webkit: Google chorme和safari
三、兼容
瀏覽器是由不同廠家開發的，核心代碼不同。
1. CSS Bug: 解析不一致，CSS在瀏覽器中不能正確顯示
2. CSS Hack: 補丁（亦稱patch），兼容，使CSS在不同瀏覽器顯示相同的效果。非官方的。
3. Filter：過濾器 兼容 是hack的一種類型。
四、各種bug
1.圖片有邊框bug（只有在a後加圖片纔出現）
HACK: 給 img 加 border:0 none;
直接放在base.css裏，各圖片底部就可以統一改爲無邊框。
2.圖片有間隙——基線對齊方式
HACK：
1）將img轉成塊級 img{display:block}
2）將父元素字體大小設爲0，沒有字和圖的基線對齊了 div{font-size:0;}
3.雙倍浮向（ie6及以下）
3.給浮動元素的浮動向加margin-left/right會加倍顯示bug。
HACK:
給浮動元素加｛display:block;｝
4.部分塊級元素擁有默認高度（16px左右）（ie6及以下）
HACK:
1）｛font-size:0;｝
2)｛overflow:hidden;｝
5.表單元素行高不一致，基線不同（所有瀏覽器存在）
HACK:
1) input{float:left;}
2) input{vertical-align:middle;}
直接放在base.css
6.按鈕元素默認大小不一（所有瀏覽器存在）
HACK：
把效果都去掉（重置）再重新加
input: {display:block; border:0 none; padding:0;}
input外套一個標籤，在標籤內寫input樣式。
7.百分比bug
浮動元素50%+50%>100%(IE6及以下)
hack:給最後一個（右邊）的浮動元素加聲明
都是左浮動 clear:right 清除右浮動
都是右浮動 clear:left 清除左浮動
8.鼠標指針bug（所有）
統一某元素鼠標指針形狀爲手型
cursor:hand;
cursor:wait;
cursor:auto默認
cursor:text
cursor:help
cursor:process
cursor:inherit
cursor:
cursor:
cursor:
cursor:
9.透明屬性
盒子裏的所有元素都變透明，背景和內容。
opacity:0.3;
取值（0，1）越大的數越不透明，0最透。
ie8:filter:alpha(opacity=50) 取值爲0-100
opacity:0.5;
filter:alpha(opacity=50);
10.ie8及以下不區分僞類和僞元素，（統一用單冒號）
ie9以後的，單冒號是僞類，雙冒號是僞元素
11.ie7及以下版本不支持子代選擇器
去掉子代，重置子代的樣式
12.
ie6:
ul>li { float:left｝
a { display:block; float:left; }
span { display:block; float:left; }
13.margin塌陷：第一個子元素與父元素存在上間距，那麼若是給第一個子元素加margin-top，最後會渲染成父元素的margin-top
①給父元素加上邊框
最後還是附上公衆號二維碼，有興趣的朋友可以掃碼關注
