margin-left、margin-right 在 Android 浏览器中不起作用

Question

考虑以下代码：

 <!doctype html>
 <html>
 <body>
 <div style="background-color: yellow; width: 100vw; height: 100vh; text-align: center;">
    <button style="display: block; margin-left: auto; margin-right: auto;">This is a button</button>
 </div>
 </body>
 </html>

我尝试在 Chrome 和 Mozilla 中运行它，它产生以下输出：

但是，当我尝试在 android 浏览器中运行它时，按钮在左侧，似乎 margin-left 和 margin-right 在 android 浏览器。知道为什么吗？

Answer 1

您需要刷新浏览器几次，它一定缓存了 css。它看起来像您在 android 4.4.

上期望的那样

为 android 清除 chrome 上的缓存：

触摸 Chrome 菜单 > 设置。
触摸（高级）隐私。
触摸清除浏览数据。

如果它仍然不适用于我的演示，请告诉我您在 android.

上使用的版本和浏览器

更新：（对于那些想知道的人）这是通过向居中的元素添加宽度来解决的。为了 margin:auto;为了在一些旧浏览器上工作，在这种情况下我们添加了 width:auto;

要测试的演示 http://jsfiddle.net/Lw543yys/。 <>

<>

Answer 2

我建议使用 "reset.css"（或）"normalize.css"

我用了一个https://code.google.com/p/reset5/

这将解决跨多个浏览器的浏览器问题

您也可以使用http://necolas.github.io/normalize.css/

那么您的 CSS 将在所有浏览器中正常运行

margin-left、margin-right 在 Android 浏览器中不起作用

margin-left, margin-right does not work in Android Browser

html

android-browser