移動端行列布局

最近發現UC下經過display:inline-block佈局有點問題，全用最新版：Android6系統和最新版UC手機瀏覽器都仍是有問題。

 

設計需求： 導航欄100%寬度，共有4個子欄目，每個欄目佔1/4寬度。

HTML代碼爲：

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

 

方法一： 經過"display: inline-block;"來佈局，這裏經過父元素設置"font-size: 0;"消除子元素inline-block的默認間距。

ul{ width: 100%; font-size: 0;          
} li{ display: inline-block; width: 25%;
 height: 100px;    
}

 

結果就是手機瀏覽器表現都很好，除了UC瀏覽器(下圖左爲正常瀏覽器，右爲UC瀏覽器)：

                  

看來設置父元素"font-size: 0"在UC下並不能消除掉子元素inline-block的默認間距。

那下面就換一種消除間距的方法——改變HTML標籤的寫法。

 

方法二：HTML結束標籤和開始標籤之間不留空

<ul>
  <li></li ><li></li ><li></li ><li></li>
</ul>

或者：

<ul>
  <li>
  </li><li>
  </li><li>
  </li><li>
  </li>
</ul>

看起來很怪，目的就是爲了從根源上消除HTML空格，那麼默認間距也就沒有了。

 

方法三：不用inline-block，用float

ul{ list-style: none; width: 100%;
} li{ float: left; width: 25%; height: 100px;
}

這種方法UC下表現正常。

 

方法四：使用box/flex佈局

ul{ list-style: none; display: -webkit-box;
} li{ -webkit-box-flex: 1; height: 100px;
}

這樣子包括UC在內表現都正常。不過畢竟-webkit-box是老式語法，好像有點落後。那就用新的flex吧：

ul { width: 100%; list-style: none; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row;

} li{ -webkit-flex-grow: 1; flex-grow: 1; height: 100px;
}

以上代碼運行截屏以下（左爲正常瀏覽器，右爲UC瀏覽器）：

            

 

結果發現安卓機的UC又不行了，都已經顯式聲明爲橫着排列，UC仍是打豎的。

 

所以仍是用-webkit-box吧，又或者-webkit-box和flex一塊兒用，這樣都是表現正常的：

ul { width: 100%; list-style: none; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row;
}
li{ -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; height: 100px;
}

 

方法五：表格佈局

ul{ display: table; width: 100%;
} li{ display: table-cell; width: 25%; height: 100px;
}

 

方法六：

　　絕對定位（=.=）

 

總結： 安卓UC手機瀏覽器對於父元素使用"font-size: 0;"來消除子元素的inline-block的默認間距不起做用，並且對flex支持很差。在正式應用中應考慮兼容的方案。