适用于 Chrome 移动版的 "Display:-webkit-flex" 的替代方案

Question

最近我一直在研究一个利用HTML5/CSS3的移动优化Web平台。此应用程序有一个登录页面，该页面由四个大小相等的磁贴组成，中间有一个图标（其他一些样式，例如它们之间的一些填充和边框半径等）。这些磁贴的大小基于屏幕大小使用"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 上根本无法正确显示（适用于测试版，而不是当前版本）。

基本上，我希望重写CSS以实现完全相同的布局，但是我很难找到另一种方法，非常感谢任何帮助。

Answer 1

Beta 可能支持最近重新起草的功能（您在代码中使用），而较旧的浏览器（即当前未处于测试阶段的浏览器！）采用不同的语法。这里有一篇很好的文章。同时，caniuse.com 非常适合快速检查什么支持什么。

Answer 2

使用以下

标记自行解决。

.HTML

    <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;
}

工作一种享受。吉斯菲德尔