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

时间：2015-06-19 02:52:39

标签： html html5 android-browser

请考虑以下代码：

 <!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中运行它，它产生以下输出：

enter image description here

然而，当我试图在Android浏览器中运行它时，按钮位于左侧，看起来像margin-left和margin-right在android浏览器上不起作用。知道为什么吗？

2 个答案:

答案 0 :(得分：3)

您需要刷新浏览器几次，它必须缓存css。它看起来像你对android 4.4的期望。

清除chrome for chrome的缓存：

  1. 触摸Chrome菜单＆gt;设置。

  2. 触摸（高级）隐私。

  3. 触摸清除浏览数据。

    4. 如果它仍然无法使用我的演示版，请告诉我您在Android上使用的版本和浏览器。

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

    演示以测试http://jsfiddle.net/Lw543yys/。     ＆LT;＆GT; enter image description here 

            <>

答案 1 :(得分：1)

我建议使用＆＃34; reset.css＆＃34; （或）＆＃34; normalize.css＆＃34;

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

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

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

然后你的CSS将在所有浏览器中正常运行

相关问题
最新问题