瀏覽器兼容性問題的實例分析

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 15:30:42

瀏覽器兼容性問題的實例分析

瀏覽器兼容性問題的實例分析:兼容性問題是前端的一個重要部分。在國內(nèi)的瀏覽器中，360瀏覽器，QQ瀏覽器等絕大部分都是雙核瀏覽器。雙核瀏覽器即擁有IE兼容內(nèi)核和非IE極速內(nèi)核兩個內(nèi)核，分別對應(yīng)兼容模式和極速模式。兼容模式時使用IE內(nèi)核，極速模式采用webkit內(nèi)核。而目前大部分網(wǎng)站為了

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀瀏覽器兼容性問題的實例分析:兼容性問題是前端的一個重要部分。在國內(nèi)的瀏覽器中，360瀏覽器，QQ瀏覽器等絕大部分都是雙核瀏覽器。雙核瀏覽器即擁有IE兼容內(nèi)核和非IE極速內(nèi)核兩個內(nèi)核，分別對應(yīng)兼容模式和極速模式。兼容模式時使用IE內(nèi)核，極速模式采用webkit內(nèi)核。而目前大部分網(wǎng)站為了

兼容性問題是前端的一個重要部分。

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

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

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

而在工作中發(fā)現(xiàn)了一個問題，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 class="wrapper"><div class="flex-1"></div><div class="flex-2"><div class="circle"></div></div></div></body></html>

代碼在flex-2中居中畫了一個圓，chrome表現(xiàn)很正常，如圖