diff --git a/src/scss/components/_accordion.scss b/src/scss/components/_accordion.scss index 7583007..f2695bd 100644 --- a/src/scss/components/_accordion.scss +++ b/src/scss/components/_accordion.scss @@ -50,6 +50,7 @@ } .#{$accordion-prefix}-icon { + @include fixes-flexbox-for-andriod; font-size: rem-calc(20); color: rgba($gray-light, .45); transform: rotate(0deg); diff --git a/src/scss/components/_button-group.scss b/src/scss/components/_button-group.scss index 835640c..65d16a5 100644 --- a/src/scss/components/_button-group.scss +++ b/src/scss/components/_button-group.scss @@ -79,6 +79,7 @@ > .#{$button-prefix}, > .#{$button-group-prefix} { + @include fixes-flexbox-for-andriod; flex: 1; } } diff --git a/src/scss/components/_list.scss b/src/scss/components/_list.scss index 939e575..3881209 100644 --- a/src/scss/components/_list.scss +++ b/src/scss/components/_list.scss @@ -154,6 +154,7 @@ @extend %item-field; .#{$field-prefix}-label { + @include fixes-flexbox-for-andriod; width: 35%; } @@ -184,6 +185,7 @@ } .#{$field-prefix}-label { + @include fixes-flexbox-for-andriod; flex: 1; padding: unquote(get-side($form-padding, top) + rem-calc(1) + " " + 0); line-height: normal; @@ -201,7 +203,7 @@ } &:checked + .#{$field-prefix}-icon { - display: inline-block; + display: block; } } } diff --git a/src/scss/helper/_mixins.scss b/src/scss/helper/_mixins.scss index 16bef19..5eefb79 100644 --- a/src/scss/helper/_mixins.scss +++ b/src/scss/helper/_mixins.scss @@ -155,3 +155,14 @@ %force-hardware-acceleration { @include force-hardware-acceleration(); } + + +// Browser compatibility +// ----------------------------------------------------------------------------- + +// 在安卓里 flex 里的子元素一定要是 block 元素,如果用行内元素 可以用flex-inline。 +// (不过flex-inline兼容也不好,所以全改成块元素就好了) +// @see https://github.com/amazeui/amazeui-touch/issues/12#issuecomment-169879658 +@mixin fixes-flexbox-for-andriod { + display: block; +}