不同的瀏覽器的核心不同，對頁面**的解析也不一樣，而導致頁面效果不一樣。由於每個瀏覽器的css預設樣式不盡相同，所以最簡單有效的方式就是對其進行初始化，相信很多朋友都寫過這樣的**，在所有css開始前，先把marin和padding都設為0，以防不同瀏覽器的顯示效果不一樣。
*[slide]
解決方案2-- 瀏覽器私有屬性
我們經常會在某個css的屬性前新增一些字首，比如-webkit-，-moz- ，-ms-，這些就是瀏覽器的私有屬性。
為什麼會出現私有屬性呢？這是因為制定html和css標準的組織w3c動作是很慢的。
通常，有w3c組織成員提出乙個新屬性，比如說圓角border-radius，大家都覺得好，但w3c制定標準，要走很複雜的程式，審查等。而瀏覽器商市場推廣時間緊，如果乙個屬性已經夠成熟了，就會在瀏覽器中加入支援。
但是為避免日後w3c公布標準時有所變更，會加入乙個私有字首，比如-webkit-border-radius，通過這種方式來提前支援新屬性。等到日後w3c公布了標準，border-radius的標準寫法確立之後，再讓新版的瀏覽器支援border-radius這種寫法。常用的字首有：
[slide]
解決方案3-- css hack
有時我們需要針對不同的瀏覽器或不同版本寫特定的css樣式，這種針對不同的瀏覽器/不同版本寫相應的css code的過程，叫做css hack!
css hack的寫法大致歸納為3種：條件hack、屬性級hack、選擇符級hack
[slide]
解決方案3-- css hack
條件hack
keywords
if後面跟的條件共包含6種選擇方式：是否、大於、大於或等於、小於、小於或等於、非指定版本
是否：指定是否ie或ie某個版本。關鍵字：空
大於：選擇大於指定版本的ie版本。關鍵字：gt（greater than）
大於或等於：選擇大於或等於指定版本的ie版本。關鍵字：gte（greater than or equal）
小於：選擇小於指定版本的ie版本。關鍵字：lt（less than）
小於或等於：選擇小於或等於指定版本的ie版本。關鍵字：lte（less than or equal）
非指定版本：選擇除指定版本外的所有ie版本。關鍵字：!
version
ie瀏覽器版本，如6、7、8
ie10及以上版本已將條件注釋特性移除，使用時需注意
[slide]
解決方案3-- css hack
條件hack舉例
解決方案3-- css hack
屬性hack
selector.test解決方案3-- css hack
選擇符級hack
選擇符級hack是針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在css選擇器前加上一些只有某些特定瀏覽器才能識別的字首進行hack
>
selector
*html *字首只對ie6生效
*+html *+字首只對ie7生效
@media screen\9只對ie6/7生效
@media \0screen }只對ie8有效
@media \0screen\,screen\9}只對ie6/7/8有效
@media screen\0 } 只對ie8/9/10有效
@media screen and (min-width:0\0) } 只對ie9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) } 只對ie10有效
解決方案3-- 自動化外掛程式
autoprefixer是一款自動管理瀏覽器字首的外掛程式，它可以解析css檔案並且新增瀏覽器字首到css內容裡，使用can i use（caniuse**）的資料來決定哪些字首是需要的。
把autoprefixer新增到資源構建工具（例如grunt）後，可以完全忘記有關css字首的東西，只需按照最新的w3c規範來正常書寫css即可。如果專案需要支援舊版瀏覽器，可修改browsers引數設定
//我們編寫的**
div
// 自動補全的**，具體補全哪些由要相容的瀏覽器版本決定，可以自行設定
div
瀏覽器相容問題
我經常看到一些人提問說網頁錯位，和在火狐裡面看上去網頁是好的，在ie在錯位了.在web 下html css裡全看一些關於這些問題.還有有ul li什麼調整不好的.等等 全可以用css hack 解決的.解決方法 用positon relative 然後 top 0px left 0px 上面的top...
瀏覽器相容問題
給近兩天的工作乙個總結，給這週劃上句號。工作中遇到了在google顯示的很好的介面，在ie顯示的不是很好，但還能看，僅僅是顏色和和位置錯位，在360瀏覽器下看就是真的錯誤太大了，不顯示，樣式也亂了，於是走上解決瀏覽器相容之路。思路1 對應每個瀏覽器寫個css，判斷之，工作量太大，放棄。思路2 針對每...
瀏覽器相容問題
所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同 段 有不同的解析，造成 顯 效果不統 的情況。在 多 數情況下，我們的需求是，論 戶 什麼瀏覽器來檢視我們的 站或者登陸我們的系統，都應該是統 的顯 效果。所 以瀏覽器的相容性問題是前端開發 員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前，我...