替代Chrome Display的"Display:-webkit-flex"

Question

最近我一直在使用HTML5/CSS3开发一个移动优化的网络平台.此应用程序有一个登陆页面,其中包含四个大小相同的瓷砖,中间有一个Icon(其他一些样式,如它们之间的填充和边界半径等).使用" display:flex; " 基于屏幕尺寸来调整这些图块的大小,这显然是由于用户能够改变屏幕方向的性质.

我用以下标记实现了这一点......

HTML

<div class="container">        
    <a href="1.aspx">
        <span class="icon1"></span>
    </a>
    <a href="2.aspx">
        <span class="icon2"></span>
    </a>
    <a href="3.aspx">
        <span class="icon3"></span>
    </a>
    <a href="4.aspx">
        <span class="icon4"></span>
    </a>
</div>

CSS

.container {
    min-height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    }   

    .container a {
        -webkit-flex: 1 1 48%;
        flex: 1 1 48%;
        margin: 1%;
        position: relative;

        -webkit-border-radius: 8px;
           -moz-border-radius: 8px;
                border-radius: 8px;

        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        }

我遇到了一个相当令人沮丧的问题,即在iOS或Android上的Chrome Mobile(适用于Beta,而不是当前版本)上无法正常显示.

基本上我想重新编写CSS以实现完全相同的布局,但我很难找到另一种方法来做到这一点,任何帮助都非常感激.

Answer 1

使用以下标记自己解决了这个问题。

超文本标记语言

    <div class="landingwrap">
        <div class="landingstrip">
            <div class="landingicon-wrap">
                <a Class="landingicon landingicon-tl">
                    <span class="icon"></span>
                </a>
            </div>
            <div class="landingicon-wrap">
                <a Class="landingicon landingicon-tl">
                    <span class="icon"></span>
                </a>
            </div>
        </div>
        <div class="landingstrip">
            <div class="landingicon-wrap">
                <a Class="landingicon landingicon-tl">
                    <span class="icon"></span>
                </a>
            </div>
            <div class="landingicon-wrap">
                <a Class="landingicon landingicon-tl">
                    <span class="icon"></span>
                </a>
            </div>
       </div>
  </div>

CSS

body {
     background: #222;

}
.landingwrap {

    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
}
.landingstrip {
    height: 50%;
}
.landingicon-wrap {
    float: left;
    position: relative;
    width: 50%;
    height: 100%;
}
.landingicon {
    background-color: #2aace2;
    position: absolute;
        top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
}

工作是一种享受。JSFIDDLE