華為mate8對flex的支援

lwenn發表於2017-11-07
Flex

最近做移動端頁面，發現華為mate8真是傲嬌（生氣，對 flex 各種不支援。不知道華為別的機型有沒有這個問題，以下以mate8為例。

先上結論

今天用 weinre 除錯了一下，發現幾點：

  • 華為mate8只支援 -webkit-box
  • -webkit-box 盒子裡的元素必須是塊級元素（inline-block也是不行的）
  • 子元素不支援 flex 屬性，但是支援 box 相關的 -webkit-box-flex 屬性

得知這些之後，又愉快地（不存在的）去改樣式了~

相容寫法

html:

<div class="flex-box">
    <button type="button">儲存</button>
    <button type="button">取消</button>
</div>複製程式碼

css:

.flex-box {
    display: -webkit-box; /* mate8 支援 */
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.flex-box button {
    display: block;
    -webkit-box-flex: 1; /* mate8 支援 */
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}複製程式碼

weinre 使用教程

xuyuan923.github.io/2015/01/03/…
github.com/nupthale/we…

Goog Luck!

相關文章