Question

这个网站我一直在为我的客户工作，我一直致力于移动布局。我决定在整个网站上使用flexbox布局，但由于一些奇怪的原因，4.4.2的股票android网页浏览器并没有加载任何使用flexbox的元素。 Chrome for Android可以很好地使用flexbox加载我的所有元素。我无法确定发生了什么，但任何可以提供的帮助都会很棒。我的所有代码都在＆＃34; hoopactivation.x10.mx＆＃34;如果您使用开发人员工具。如果需要，我也可以在这里发布我的代码，如果有必要的话（无论如何都可能发生。我现在不在我的笔记本电脑附近）。

Answer 1

在某些Android上，flexbox没有处理内联元素，这似乎流动的元素已经消失。

要解决此问题，您必须将流动的项目强制为display:block。我试过这个并且它有效，你可以看到这里的细节。

http://browser.colla.me/show/flexbox_make_element_collapse_height_0

Answer 2

我没有任何特定的代码可以发布，但我自己也遇到过一些有趣的问题。我发现http://thatemil.com/blog/2013/11/03/sticky-footers-flexbox-and-ie10/上的博客文章非常有用，可以解释为支持其他浏览器需要做些什么。我正在使用＆＃34;现代＆＃34; flexbox的标准，直到我发现它不能在Android上运行，并发现博客帖子，所以希望它会有所帮助。为了记录，这是粘性页脚的CSS：

 /*
 Sticky Footer - Flexbox
 */

.flexboxtweener, .flexboxtweener>body {
    height: 100%; /* IE 10 */
}

.flexbox {
    body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex; /* Safari */
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        min-height: 100vh;
    }

    main {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
        flex: 1 0 auto;
        -webkit-flex: 1 0 auto;
    }
}

/*
 Sticky Footer - w/ JS, no flexbox
 */

html.js.no-flexbox {
    position: relative;
    min-height: 100%;

    footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
    }
}

/*
 Sticky Footer - no JS, no flexbox
 */

// x-small
html.no-js {
    main {
        margin-bottom: 508px;
    }
    footer {
        height: 508px;
    }
}

@media (min-width: @screen-md-min) {
    .no-js main {
        margin-bottom: 210px;
    }

    .no-js footer {
        height: 210px;
    }
}

那是在LESS并使用一些Bootstrap mixins，但希望这有帮助！

Flexbox不适用于Android 4.4.2中的Android网页浏览器

2 个答案: