在國內(nèi)的瀏覽器中，360瀏覽器，QQ瀏覽器等絕大部分都是雙核瀏覽器。雙核瀏覽器即擁有IE兼容內(nèi)核和非IE極速內(nèi)核兩個(gè)內(nèi)核，分別對應(yīng)兼容模式和極速模式。兼容模式時(shí)使用IE內(nèi)核，極速模式采用webkit內(nèi)核。而目前大部分網(wǎng)站為了性能和用戶體驗(yàn)，默認(rèn)使用極速模式。在極速模式出現(xiàn)問題時(shí)，使用兼容模式。

雖然極速模式是使用的webkit內(nèi)核，但是瀏覽器的表現(xiàn)卻還是有一定差異。平時(shí)使用Chrome調(diào)試，在極速模式下卻表現(xiàn)的不正常。

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

而在工作中發(fā)現(xiàn)了一個(gè)問題，flex和相對定位配合使用時(shí)：

 !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中居中畫了一個(gè)圓，chrome表現(xiàn)很正常，如圖
 
 
但是在360極速下，卻是這樣的：
 
找了一下原因，圓在 豎直方向上的相對定位沒有生效，即：“top:50%”沒起作用；
為什么沒作用呢，我認(rèn)為是div.flex-1沒有顯式的寫出高度， flex:0 0 500px 是flex屬性的縮寫，
，換一種寫法就可以搞定:
其實(shí)就是給div定個(gè)高度。而這個(gè)時(shí)候又在考慮，高度不定的情況下怎么辦？
用css3 calc()？這樣的話遇到flex子區(qū)域有相對定位時(shí)flex就沒有使用必要了。雖然遇到的問題解決了，但似乎又來了新的問題。
國內(nèi)瀏覽器兼容模式下為什么會(huì)表現(xiàn)的不一樣。。。。。。。。。。。。。
以上就是瀏覽器兼容性問題的實(shí)例分析的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。