前端要考慮的浏覽器兼容?為什麼會有浏覽器兼容問題浏覽器兼容性問題，是指因為不同的浏覽器标準不同對同一段代碼的解析有差異或者是統一浏覽器由于版本的不同，導緻支持的特性不一樣，造成頁面顯示效果不一緻在大多數情況下，我們的需求是，無論用戶用什麼浏覽器來查看我們的頁面，都應該是統一的效果，所以需要一些方法讓他的頁面顯示效果一緻，今天小編就來說說關于前端要考慮的浏覽器兼容?下面更多詳細答案一起來看看吧!

前端要考慮的浏覽器兼容

為什麼會有浏覽器兼容問題

浏覽器兼容性問題，是指因為不同的浏覽器标準不同對同一段代碼的解析有差異或者是統一浏覽器由于版本的不同，導緻支持的特性不一樣，造成頁面顯示效果不一緻。在大多數情況下，我們的需求是，無論用戶用什麼浏覽器來查看我們的頁面，都應該是統一的效果，所以需要一些方法讓他的頁面顯示效果一緻。

部分兼容問題解決方案

問題一：不同浏覽器的标簽默認的内外邊距不同

//解決方案： *{margin:0;padding:0;}

問題二：圖片默認有間距

解決方案：使用float屬性為img布局（問題一中提到的通配符不起作用）

問題三：li之間有間距

解決方法：li設置vertical-align:middle

問題四：标簽最低高度設置min-height不兼容

解決方案：設置一個标簽的最小高度200px

p{min-height:200px; height:auto !important; height:200px; overflow:visible; }

問題五：ie各個版本的Hack

//類内部hack： .header {_width:100px;} /* IE6專用*/ .header {* width:100px;} /* IE7專用*/ .header {*width:100px;} /* IE6、IE7共用*/ .header {width:100px\0;} /* IE8、IE9共用*/ .header {width:100px\9;} /* IE6、IE7、IE8、IE9共用*/ .header {width:330px\9\0;} /* IE9專用*/ //選擇器Hack： *HTML .header{} /*IE6*/ * html .header{} /*IE7*/

問題六：常見屬性的兼容情況

• inline-block: >=ie8min-width/min-height: >=ie8:before,:after: >=ie8div:hover: >=ie7inline-block: >=ie8background-size: >=ie9圓角: >= ie9陰影: >= ie9動畫/漸變: >= ie10

問題七：clear float

.clearfix:after{ content: ''; display: block; clear: both; } .clearfix{ *zoom: 1; /* 僅對ie67有效 */ }

可能用到的技巧和工具

• 條件注釋

條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隐藏代碼。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!