在國內的瀏覽器中，360瀏覽器，QQ瀏覽器等絕大部分都是雙核瀏覽器。雙核瀏覽器即擁有IE兼容內核和非IE極速內核兩個內核，分別對應兼容模式和極速模式。兼容模式時使用IE內核，極速模式采用webkit內核。而目前大部分網站為了性能和用戶體驗，默認使用極速模式。在極速模式出現問題時，使用兼容模式。

雖然極速模式是使用的webkit內核，但是瀏覽器的表現卻還是有一定差異。平時使用Chrome調試，在極速模式下卻表現的不正常。

好，進入正題。flex是目前前端布局中一個非常好的屬性，這里不多說，可以看大神介紹

而在工作中發現了一個問題，flex和相對定位配合使用時：

 !DOCTYPE html  html lang= en  head meta charset= UTF-8  title Test /title style html,body{margin:0;padding:0;width: 100%;height: 100%;}.wrapper{position: relative;width: 100%;height: 100%;background-color: #fff;display: flex;flex-direction: column;}.flex-1{flex: 0 0 200px;background-color: #dfdfdf;}.flex-2{flex: 1;}.circle{position: relative;left: 50%;top: 50%;margin: -100px 0 0 -100px;width: 200px;height: 200px;border-radius: 100px;background-color: #52caff;} /style /head body div >
代碼在flex-2中居中畫了一個圓，chrome表現很正常，如圖
 
 
但是在360極速下，卻是這樣的：
 
找了一下原因，圓在 豎直方向上的相對定位沒有生效，即：“top:50%”沒起作用；
為什么沒作用呢，我認為是div.flex-1沒有顯式的寫出高度， flex:0 0 500px 是flex屬性的縮寫，
，換一種寫法就可以搞定:
其實就是給div定個高度。而這個時候又在考慮，高度不定的情況下怎么辦？
用css3 calc()？這樣的話遇到flex子區域有相對定位時flex就沒有使用必要了。雖然遇到的問題解決了，但似乎又來了新的問題。
國內瀏覽器兼容模式下為什么會表現的不一樣。。。。。。。。。。。。。
以上就是瀏覽器兼容性問題的實例分析的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。