移動端行列佈局

最近發現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還是打豎的。

所以可以用-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支持不好。在正式應用中應考慮相容的方案。