【问题标题】:margin-left, margin-right does not work in Android Browsermargin-left, margin-right 在 Android 浏览器中不起作用
【发布时间】:2015-09-04 21:46:20
【问题描述】:

考虑下面的代码:

 <!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 浏览器上不起作用。知道为什么吗?

【问题讨论】:

    标签: html android-browser


    【解决方案1】:

    您需要刷新浏览器几次,它一定已经缓存了 css。它看起来像您在 android 4.4 上所期望的那样。

    清除 chrome for android 上的缓存:

    1. 触摸 Chrome 菜单 > 设置。

    2. 触摸(高级)隐私。

    3. 点击清除浏览数据。

    如果我的演示仍然无法使用,请告诉我您在 android 上使用的版本和浏览器。

    更新:(对于那些想知道的人) 这是通过向居中的元素添加宽度来解决的。为了保证金:自动;在一些旧浏览器上工作,在这种情况下,我们添加了 width:auto;

    用于测试http://jsfiddle.net/Lw543yys/ 的演示。

            <>
    

    【讨论】:

    • 我用的是Android 4.2,我刷新了几次页面都没有成功!
    • 这是我做的:我清除了Android浏览器的数据并强制它停止但仍然没有工作!
    • 你用的是安卓版的chrome吗?
    • 没有。只是默认浏览器。
    • 在那些旧的浏览器中,您必须在按钮上定义一个宽度,以便自动边距工作。我添加了:宽度:自动;在你的代码中试试。请将我的标记为答案。
    【解决方案2】:

    我建议使用“reset.css”(或)“normalize.css”

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

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

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-12-19
      • 1970-01-01
      • 2013-11-03
      • 1970-01-01
      相关资源
      最近更新 更多