7

最近我一直在开发一个使用 HTML5/CSS3 的移动优化网络平台。这个应用程序有一个登陆页面，它由四个大小相同的图块组成，中间有一个图标（一些其他样式，比如它们之间的一些填充和边框半径等）。这些图块的大小根据屏幕大小使用“ 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 以实现完全相同的布局，但我很难找到另一种方法来做到这一点，非常感谢任何帮助。

4

2 回答 2

1

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

于 2013-01-29T14:59:23.577 回答
1

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

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

工作一种享受。JSFIDDLE

于 2013-02-05T11:09:00.410 回答