css - Chrome 移动版 "Display:-webkit-flex"的替代方案

Question

最近，我一直致力于使用 HTML5/CSS3 开发移动优化网络平台。这个应用程序有一个登陆页面，它由四个大小相同的图 block 组成，中间有一个图标(一些其他样式，比如它们之间的一些填充和边框半径等)。这些图 block 的大小基于使用“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

Beta 可能支持最近重新起草的功能(您在代码中使用的)，而旧版浏览器(即当前未处于 Beta 阶段的浏览器!)采用不同的语法。有一篇关于此的好文章 here .同时，caniuse.com非常适合快速检查什么支持什么。