android - CSS "display:block"不适用于 Chrome for Android

Question

我在我的博客上写了一篇新文章，该页面在所有浏览器中看起来都很好，除了 Chrome for Android 4.4.4 (KitKat)。 更新:也不适用于 Android Marshmallow。

这个特定帖子的唯一不同之处是一个可滚动的表格，在自定义样式表上设置样式:

.article_body table {
    width: 100%;
} 
@media screen and (max-width: 479px) {
    .article_body table {
        width: auto;
        display: block;
        overflow: auto;
        overflow-x: scroll;
        white-space: nowrap;
        border-collapse: collapse;
        border-spacing: 0;
        clear: both;
        -webkit-overflow-scrolling:touch;
        touch-action: auto;
        -ms-touch-action: auto;
    }   
}

表格在所有浏览器中都是可滚动的，Android 上的 Chrome 除外。但最重要的是，帖子从某个时候开始显示一个白色 block ，直到帖子结束，如下面的屏幕截图所示:

错误的开始

---

---

错误结束:

---

测试:

• PC，Win 7(IE 11、Chrome、Firefox)- 可以
• iPhone、iOS 9.3.1(Chrome 和 Safari)- 可以

• Windows Phone (IE) - 确定

• Moto G - Mozilla Firefox - 确定

• Moto G - Google Chrome - 失败(仅限纵向)

我博客中的所有其他帖子在所有这些浏览器上都正常。

CSS 测试:

经过一些测试，我发现错误依赖于 display:block;。

如果我更改或删除此属性，白色 block 在 Chrome 上消失，但布局在所有其他浏览器中都很糟糕。

我应该怎么做才能解决这个问题？!

---

博文:http://blog.virtuacreative.com.br/upgrade-jekyll-2-to-3-gh-pages.html

Android 版本:Android 4.4.4； XT1032 内部版本/KXB21.14-L1.40

Chrome :49.0.2623.105

Answer 1

我发现了白色区域的问题。它位于 animate.css 更改以下行；

<div class="header-color col-sm-9 col-sm-offset-3 animated fadeIn">

进入这个:

<div class="header-color col-sm-9 col-sm-offset-3">

我怀疑其中具有 2000 像素值的过渡(淡入)是导致空白/截断问题的原因。

您也可以将此值乘以 10 来解决此问题。