Question

我正在使用HTML5和flexbox模型创建一个简单的网站，该模型适用于大多数浏览器，但在IOS（使用iphone 7 plus）和一些较旧的Android手机上打破了。

我已经将一个codepen放在一起来演示在使用codepens“crossbrowser testing”时会复制的问题。图像不显示但占位符是正确的。我还将在这篇文章中包含HTML和CSS [LESS]代码。

http://codepen.io/stuartmc77/pen/PpjKmY

我已经添加了我能想到的所有跨浏览器前缀，并且从其他各个帖子中找到但是似乎没有解决它。

我对flexbox模型非常陌生，所以任何和所有的帮助都会被提升。

[HTML]

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>MyPage</title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>
<body>
    <div>

        <header>
            <div class="leftHeaderText">MY&nbsp;WEB</div>
            <div class="headerImage"><img src="/Images/alogo.png" /></div>
            <div class="rightHeaderText">PAGE</div>
        </header>

        <nav>
            <div id="burgerMenu">
                <div></div>
                <div></div>
                <div></div>
            </div>

            <ul id="menuBar">
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">Parent 1</a>
                    <ul>
                        <li>
                            <a href="#">Sub Item 1</a>
                            <ul>
                                <li><a href="#">Sub Sub Item1</a></li>
                                <li><a href="#">Sub Sub Item2</a></li>
                                <li><a href="#">Sub Sub Item3</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Sub Item 2</a>
                            <ul>
                                <li><a href="#">Sub Sub Item1</a></li>
                                <li><a href="#">Sub Sub Item2</a></li>
                                <li><a href="#">Sub Sub Item3</a></li>
                                <li><a href="#">Sub Sub Item4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sub Item 3</a></li>
                        <li><a href="#">Sub Item 4</a></li>
                    </ul>
                </li>
                <li><a href="#">Parent 2</a></li>
                <li><a href="#">Parent 3</a></li>
            </ul>
        </nav>

        <main>


<div class="heroBanner">
    <p>
        Welcome to the new website.<br />
        <br />
        Soon you will be able to do stuff here<br />
        You'll be able to do this and that.<br />
        There will also be a thingymabob<br />
        <br />
        Check back soon.
    </p>
</div>



<div class="vmContainer">
    <div class="vmItem">
        <div class="header">Item1</div>
        <div class="item"></div>
    </div>
    <div class="vmItem">
        <div class="header">Item 2</div>
        <div class="item"></div>
    </div>
    <div class="vmItem">
        <div class="header">Item 3</div>
        <div class="item"></div>
    </div>
    <div class="vmItem">
        <div class="header">Item 4</div>
        <div class="item"></div>
    </div>
</div>
        </main>

        <footer>
            <ul>
                <li>Copyright &copy; 2017</li>
                <li>Contact Us</li>
                <li><a href="#" target="_blank"><img src="/Images/FB-f-Logo__white_29.png" /></a></li>
                <li><div class="fb-like" data-href="https://www.facebook.com/#" data-layout="button" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div></li>
            </ul>
        </footer>
    </div>

    <script src="/bundles/jquery?v=JzhfglzUfmVF2qo-weTo-kvXJ9AJvIRBLmu11PgpbVY1"></script>



    <script type="text/javascript">
        $(document).ready(function () {
            $('#burgerMenu').on('click', function () {
                var mb = $('#menuBar');
                if ($(mb).height() == 0)
                    $(mb).height('100%');
                else
                    $(mb).height(0);
            })
        })
    </script>
</body>
</html>

[CSS（LESS）]

@primaryTextColour: #123456;
@linkHoverColour: #ff6a00;
@htmlBG: #000;
@primaryBGColour: #fff;
@headerTextColour: #000;
@primaryBorderColour: #123456;
@pageBorderSize: 30px;
@menuHoverBGColour: #dcefff;


html {
    background-color: @htmlBG;
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-color: @htmlBG;
    color: @primaryTextColour;
    margin: 0;
    font-family: Moon;
    height: 100%;
}

body > div {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;
    -ms-flex-flow: column wrap;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    max-width: 80%;
    min-width: 730px;
    margin: auto;
    min-height: 100vh;
    background-color: @primaryBGColour;

    header {
        -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
        -ms-flex-order: 1; /* TWEENER - IE 10 */
        -webkit-flex-order: 1;
        order: 1;
        -ms-flex: 0 1 100%;
        -webkit-flex: 0 1 100%;
        flex: 0 1 100%;
        font-weight: bold;
        font-size: 3em;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: row nowrap;
        -webkit-flex-flow: row nowrap;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        //display: none;
        .headerImage {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
            -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
            -ms-flex-order: 2; /* TWEENER - IE 10 */
            order: 2;

            img {
                background: url(/Images/mcmlogo.png);
                background-size: 200px 200px;
                width: 200px;
                height: 200px;
                border: 0 none #000;
            }
        }

        .leftHeaderText {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
            -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
            -ms-flex-order: 1; /* TWEENER - IE 10 */
            -webkit-flex-order: 1;
            order: 1;
        }

        .rightHeaderText {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */
            -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */
            -ms-flex-order: 3; /* TWEENER - IE 10 */
            -webkit-flex-order: 3;
            order: 3;
        }
    }

    main {
        -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */
        -ms-flex-order: 3; /* TWEENER - IE 10 */
        -webkit-flex-order: 3;
        order: 3;
        -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        padding: 30px 0;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: column nowrap;
        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: stretch;
    }

    aside {
        -webkit-box-ordinal-group: 4; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 4; /* OLD - Firefox 19- */
        -ms-flex-order: 4; /* TWEENER - IE 10 */
        -webkit-flex-order: 4;
        order: 4;
        -ms-flex: 0 1 200px;
        -webkit-flex: 0 1 200px;
        flex: 0 1 200px;
    }

    footer {
        -webkit-box-ordinal-group: 5; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 5; /* OLD - Firefox 19- */
        -ms-flex-order: 5; /* TWEENER - IE 10 */
        -webkit-flex-order: 5;
        order: 5;
        -ms-flex: 0 1 100%;
        -webkit-flex: 0 1 100%;
        flex: 0 1 100%;
        background-color: @primaryBorderColour;
        color: @linkHoverColour;
        font-weight: bold;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        height: 50px;
        -ms-flex-flow: column nowrap;
        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: stretch;

        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            -ms-flex: 0 1 100%;
            -webkit-flex: 0 1 100%;
            flex: 0 1 100%;
            display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox; /* TWEENER - IE 10 */
            display: -webkit-flex; /* NEW - Chrome */
            display: flex;
            -ms-flex-flow: row nowrap;
            -webkit-flex-flow: row nowrap;
            flex-flow: row nowrap;
            justify-content: space-around;

            a, a:link, a:visited, a:focus, a:hover, a:active {
                -ms-flex: 0 1;
                -webkit-flex: 0 1;
                flex: 0 1;
                text-decoration: none;
                font-weight: bold;
                color: @linkHoverColour;
                white-space: nowrap;
            }

            li {
                -ms-flex: 0 1;
                -webkit-flex: 0 1;
                flex: 0 1;
                display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
                display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
                display: -ms-flexbox; /* TWEENER - IE 10 */
                display: -webkit-flex; /* NEW - Chrome */
                display: flex;
                -ms-flex-flow: column nowrap;
                -webkit-flex-flow: column nowrap;
                flex-flow: column nowrap;
                justify-content: center;
            }
        }
    }

    @media screen and (max-width: 768px) {
        max-width: 100%;
        min-width: 320px;

        header {
            -ms-flex-flow: column;
            -webkit-flex-flow: column;
            flex-flow: column;
            justify-content: flex-start;
            align-items: center;
            font-size: 2em;

            .headerImage {
                -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
                -ms-flex-order: 1; /* TWEENER - IE 10 */
                -webkit-flex-order: 1;
                order: 1;

                img {
                    background-size: 150px 150px;
                    width: 150px;
                    height: 150px;
                }
            }

            .leftHeaderText {
                -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
                -ms-flex-order: 2; /* TWEENER - IE 10 */
                -webkit-flex-order: 2;
                order: 2;
            }

            .rightHeaderText {
                -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */
                -ms-flex-order: 3; /* TWEENER - IE 10 */
                -webkit-flex-order: 3;
                order: 3;
            }
        }

        footer {
            height: unset;

            ul {
                -ms-flex-flow: column nowrap;
                -webkit-flex-flow: column nowrap;
                flex-flow: column nowrap;
                justify-content: center;
                align-items: center;

                li {
                    padding: 5px;
                }
            }
        }
    }

    @media screen and (max-width: 320px) {
        header {
            -ms-flex-flow: row;
            -webkit-flex-flow: row;
            flex-flow: row;
            justify-content: space-around;
            align-items: center;
            font-size: 1.2em;

            .headerImage {
                -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
                -ms-flex-order: 2; /* TWEENER - IE 10 */
                -webkit-flex-order: 2;
                order: 2;

                img {
                    background-size: 75px 75px;
                    width: 75px;
                    height: 75px;
                }
            }

            .leftHeaderText {
                -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
                -ms-flex-order: 1; /* TWEENER - IE 10 */
                -webkit-flex-order: 1;
                order: 1;
            }

            .rightHeaderText {
                -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */
                -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */
                -ms-flex-order: 3; /* TWEENER - IE 10 */
                -webkit-flex-order: 3;
                order: 3;
            }
        }
    }
}


/* Hero Banner */

.heroContainer {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;
    -ms-flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: stretch;
    background-color: @primaryBorderColour;
    height: 300px;

    button {
        -ms-flex: 0 1;
        -webkit-flex: 0 1;
        flex: 0 1;
        margin: 10px;
        height: 50px;
        width: 50px;
        border: 3px solid black;
        background: transparent;
        font-weight: bold;
        font-size: 30px;
        border-radius: 25px 25px;
        opacity: .1;

        &:hover {
            opacity: .25;
        }
    }

    .heroLeftFader {
        -ms-flex: 0 1 25%;
        -webkit-flex: 0 1 25%;
        flex: 0 1 25%;
        background: linear-gradient(to left, transparent, lighten(@primaryBorderColour, 50));
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: column nowrap;
        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: flex-start;
    }

    .heroRightFader {
        -ms-flex: 0 1 25%;
        -webkit-flex: 0 1 25%;
        flex: 0 1 25%;
        background: linear-gradient(to right, transparent, lighten(@primaryBorderColour, 50));
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: column nowrap;
        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: flex-end;
    }
}

@media screen and (max-width: 768px) {
    .heroContainer {
        height: 175px;
    }
}

@media screen and (max-width: 320px) {
    .heroContainer {
        display: none;
    }
}

/* visual menu box */

.vmContainer {
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;
    -ms-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    padding: 30px;

    .vmItem {
        -ms-flex: 0 1 auto;
        -webkit-flex: 0 1 auto;
        flex: 0 1 auto;
        width: 200px;
        height: 250px;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: column nowrap;
        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: stretch;
        border: 2px solid @primaryBorderColour;
        margin: 10px;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;

        &:hover {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .header {
            -ms-flex: 0 1 50px;
            -webkit-flex: 0 1 50px;
            flex: 0 1 50px;
            background-color: @primaryBorderColour;
            color: @linkHoverColour;
            font-weight: bold;
            font-size: 1.5em;
            display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox; /* TWEENER - IE 10 */
            display: -webkit-flex; /* NEW - Chrome */
            display: flex;
            -ms-flex-flow: row;
            -webkit-flex-flow: row;
            flex-flow: row;
            justify-content: center;
            align-items: center;
            text-transform: uppercase;
        }

        .item {
            -ms-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            overflow: hidden;

            img {
                height: 100%;
                width: 100%;
            }
        }
    }
}

.heroBanner {
    -ms-flex: 0 1;
    -webkit-flex: 0 1;
    flex: 0 1;
    //position: absolute;
    color: @linkHoverColour;
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
}

body > div > nav {
    -ms-flex: 0 1 100%;
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
    -ms-flex-order: 2; /* TWEENER - IE 10 */
    -webkit-flex-order: 2;
    order: 2;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;
    -ms-flex-flow: column nowrap;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
    border-top: 1px solid @primaryBorderColour;
    border-bottom: 1px solid @primaryBorderColour;

    #burgerMenu {
        -ms-flex: 0 1;
        -webkit-flex: 0 1;
        flex: 0 1;
        padding: 7px;
        display: none;
        background-color: @primaryBorderColour;
        color: @linkHoverColour;
        font-weight: bold;


        div {
            width: 25px;
            height: 3px;
            background-color: @linkHoverColour;
            margin: 4px 0;
            border-radius: 10px 10px;
        }
    }

    #menuBar {
        -ms-flex: 0 1;
        -webkit-flex: 0 1;
        flex: 0 1;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex;
        -ms-flex-flow: row nowrap;
        -webkit-flex-flow: row nowrap;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: stretch;
        padding: 0;
        margin: 0;
        overflow: hidden;

        a, a:link, a:visited, a:focus, a:hover, a:active {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            text-decoration: none;
            font-weight: bold;
            color: @primaryTextColour;
            white-space: nowrap;
        }

        li {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            list-style-type: none;
            -moz-transition: background-color ease-in .1s;
            -o-transition: background-color ease-in .1s;
            -webkit-transition: background-color ease-in .1s;
            transition: background-color ease-in .1s;
            padding: 5px;

            &:hover {
                background-color: @menuHoverBGColour;

                > a {
                    color: @linkHoverColour;
                }

                > ul {
                    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
                    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
                    display: -ms-flexbox; /* TWEENER - IE 10 */
                    display: -webkit-flex; /* NEW - Chrome */
                    display: flex;
                }
            }
        }

        ul {
            -ms-flex: 0 1;
            -webkit-flex: 0 1;
            flex: 0 1;
            display: none;
            -ms-flex-flow: column nowrap;
            -webkit-flex-flow: column nowrap;
            flex-flow: column nowrap;
            position: absolute;
            justify-content: space-around;
            align-items: stretch;
            box-shadow: -3px 3px 5px rgba(0,0,0,.25);
            background-color: @primaryBGColour;
            -moz-animation: fadein .5s;
            -o-animation: fadein .5s;
            -webkit-animation: fadein .5s;
            animation: fadein .5s;
            padding: 0;

            ul {
                left: 50%;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    body > div > nav {
        #burgerMenu {
            display: block;
        }

        #menuBar {
            -ms-flex-flow: column nowrap;
            -webkit-flex-flow: column nowrap;
            flex-flow: column nowrap;
            justify-content: flex-start;
            height: 0;

            ul {
                position: relative;
                box-shadow: none;

                ul {
                    left: unset;
                }
            }
        }
    }
}

@media screen and (min-width: 769px) {
    body > div > nav {
        #menuBar {
            height: 100% !important;
        }
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

由于

Answer 1

你对flex的使用是过度的;它被用在不需要的区域，因此它会在浏览器中造成不必要的问题。

只有相对较新的浏览器（IE10 +，see this link支持所有浏览器兼容性）才支持Flexbox，因此支持以下任何内容都是不可能的。另外，我认为你应该阅读使用速记＆＃34; flex＆＃34;在Safari上的检查器中删除它将解决许多布局问题。

This是了解flex工作原理的绝佳指南。

使用flexbox无法在IOS上工作的网站

1 个答案: