使用 flexbox 的网站无法在 IOS 上运行

【问题标题】：Web site using flexbox not working on IOS使用 flexbox 的网站无法在 IOS 上运行
【发布时间】：2017-03-13 15:01:34
【问题描述】：

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

我已经将 codepen 放在一起来演示使用 codepen“跨浏览器测试”时确实会复制的问题。图像不显示，但占位符是正确的。我还将在这篇文章中包含 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;
    }
}

谢谢

【问题讨论】：

  • 可能的指导：Flexbox code working on all browsers except Safari. Why?
  • 我不知道...我想我可能需要剖析网站，看看是否是某个特定部分破坏了它。
  • 会尝试进一步提供帮助，但目前没有 Safari。
  • 是的，苹果显然停止支持 Windows Safari，所以我无法在最近的版本中进行测试。我必须将更改上传到测试站点并在我的手机上尝试。让调试变得相当困难哈哈。

标签： android ios css html flexbox


【解决方案1】：

你对 flex 的使用过度了；它被用于不需要它的区域，因此它会在浏览器之间造成不必要的问题。

Flexbox 仅在相对较新的浏览器上受支持（IE10+，see this link 用于所有浏览器兼容性），因此支持任何低于此的浏览器都是不可能的。另外，我认为您应该阅读速记“flex”的使用，因为在 Safari 的检查器中删除它可以解决您的许多布局问题。

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

【讨论】：

  • 谢谢...我今天将对此进行调查。 CSS Tricks 是我学习如何使用 flexbox 的地方，所以我想我一定是错过了一个技巧……据我所知，对于一个 flex 子项，子项是 flex，那么 flex 子项必须是 display: flex还有……那是我出错的地方吗？
  • 谢谢...我整理了 CSS 并删除了不需要的 flex 内容并修复了它。非常感谢。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-08-07
  • 2017-09-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode