瀏覽器的兼容
1.概述：
2.主流的瀏覽器：
IE，safari,firefox,chrome,opera,百度，360，搜狗，遨遊
3.瀏覽器的內核：
1.瀏覽器的最關鍵部分，就是渲染引擎，
2.五大瀏覽器的內核：
1.webkit
2.Blink
3.Gecko （壁虎）
4.presto (迅速)
5.trident ()
說明：
如果想要使一些瀏覽器能夠兼容，需要加一些前綴：
mozilla 內核 需要加上 -moz-
webkit -webkit-
presto -0-
IE8 -ms-
瀏覽器的兼容問題
1. CSS bug
css樣式在各個瀏覽器中的接續不一致的情況，或者不能正常正確顯示的問題
2.CSS hack
css ,hack是指一種兼容css不同瀏覽器中正確顯示的技巧方法，相當於非官方的修改，或者補丁
3.Filter：
表示過濾的意思，他是一種特定的瀏覽器或者瀏覽器組顯示或隱藏規則或聲明的方法
注意：
設計hack和filter通常兩種方式
1.利用瀏覽器自身的ＢＵＧ，來顯示或者隱藏樣式或聲明
２.利用瀏覽器對ｃｓｓ支持的不完善性，來隱藏和顯示樣式
ｈａｃｋ帶來的副作用：
降低了ｃｓｓ代碼的可讀性，增加了代碼的負擔
常見問題及解決－－圖片
1、圖片的下方有空隙產生（加了邊框而產生的間隙）
1.hack1:
img{vertical-align:middle/top/bottom}
2.hack2:
img{display:block;}
2.div中圖片的間隙
描述：在div中插入多個圖片時，圖片與圖片之間有空隙
1. hack1:
將代碼寫在一行上
2.hack2：
將<img>轉爲塊級元素，給<img>添加聲明：float:left;
3.父級元素font-size:0;或者word-spacing:負值；
3.IE在加載時默認會生成邊框（2個像素的邊框）
1.給a標籤添加邊框，並且把a標籤轉成塊級元素
4.input和img垂直方向不對齊的問題：
解決方式：
img{vertical-algin:middle;}
常見問題---間距
1.不同瀏覽器的標籤默認的外邊距和內邊距不同
解決方案：
*{margin:0;padding:0;}
2.兩個塊元素，豎向的margin值不增加，會重疊，其間距爲最大的margin值
3.IT6橫向margin加倍（產生的原因：塊屬性、float、橫向的margin）
解決方法： display：inline;
4.給子元素加margin-top 時，瀏覽器中是給父元素加margin-top值
解決方案：
1.給父元素設置padding-top:margin-top的值；
2.給父元素添加padding-top:0.1px;
3。給父元素加border
5.經典3像素bug
產生條件：
IE6瀏覽器，浮動塊元素與未浮動元素處於同一行，有默認的3px間距
解決方式：
設置非浮動元素浮動
常見問題及解決---其他
1.定義元素的不透明度：opacity
解決方式：
filter:alpha（opacity=80） IE支持
opacity:0.8 /*支持css3的瀏覽器*/
2.遊標的手指cursor
pointer：可以在IE或ff中顯示遊標手指狀
hand: 僅IE可以
3.高度自適應的問題(最小高度)
IE6不認識min-height
IE6裏的內容會自動撐開
解決方式：
div{
height:atuo!important;height:200px;min-height:20px;
}
4.a標籤的hover不適用所有標籤
產生條件：
IE6瀏覽器中Hover只支持a標籤，其他的一律不支持
解決方式：
合理用a標籤嵌套其他標籤一起使用，行內標籤或js模擬a 的hover效果
5.一行文本垂直居中問題：
vertical-algin:middle; 不管用
解決方式：
height:30px;line-height:30;
