刚遇到的手机浏览器兼容问题（ margin: 10% auto;没生效）

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 3579 天前的主题，其中的信息可能已经有所发展或是发生改变。

做的一个手机页面，只在 Chrome 里显示正常，其他浏览器（UC 9.2、QQ 浏览器最新版 5.6）都不正常，就是“立即生成”按钮的 margin: 10% auto；没生效

加了个 width: 40%;在所有浏览器中都正常

手机自带浏览器：
http://i.imgur.com/bBsZ90c.jpg?1

Chrome：
http://i.imgur.com/YfZsoQU.jpg?1

另外求一个测试手机网页的方法，Chrome 模拟手机浏览器和真实手机总是有差距

最后上代码：

Html部分：
https://gist.github.com/anonymous/3ef3daf5c6f7f9aaad05

CSS部分:
https://gist.github.com/anonymous/5285c090122c738d8ba3

浏览器

最新版

生效

18 条回复 • 2015-06-17 20:24:46 +08:00

abelyao

2015-02-03 11:43:07 +08:00

加上 width 属性

Kuro

2015-02-03 11:57:53 +08:00

试试 display: block; 或者 display: inline-block;

whrhw

2015-02-03 13:28:36 +08:00

@abelyao
加了 width 后确实正常了。那为什么没加的时候浏览器表现不一样呢？

whrhw

2015-02-03 13:29:05 +08:00

@Kuro
已经是 display: block;

learnshare

2015-02-03 13:33:31 +08:00

@whrhw
button 默认宽度是根据内容计算的（auto），浏览器不知道具体的宽度值（width），就没办法处理左右边距（margin）

learnshare

2015-02-03 13:34:30 +08:00

@whrhw
<div id="wrapper"> 没关闭

whrhw

2015-02-03 15:05:10 +08:00

@learnshare
padding 和 font-size 就把宽度撑起来了，有宽度哎

wrapper忘记闭合了，，，

learnshare

2015-02-03 15:28:48 +08:00

@whrhw
撑起来这个动作，是渲染 button 内容之后才能得到总宽度，但这个动作应该是在渲染完 button 的布局之后做的。

whrhw

2015-02-03 18:01:44 +08:00

@learnshare
谢谢解答！
那为什么在 Chrome 里是居中的？

learnshare

2015-02-03 18:15:18 +08:00

@whrhw Chrome 是新时代的 IE6，黑魔法

loveuqian

2015-02-03 18:22:48 +08:00

@whrhw 没加宽度，auto计算不出来，你可以去找下这个auto的计算公式

whrhw

2015-02-03 21:38:51 +08:00

@learnshare
也就是说 Chrome 显示的才是不正常的？

whrhw

2015-02-03 22:51:32 +08:00

@learnshare
Chrome是黑魔法的话我又在电脑上的 Firefox（正常模式，不模拟手机）和手机上的 Firefox测试，FF上“立即生成”这个按钮是居中的

learnshare

2015-02-04 10:07:55 +08:00

@whrhw 不是 Chrome 不正常，我的意思是很多 Chrome 实现的东西其他浏览器都没有，就是功能超出其他浏览器太多，造成了很大的差异性。

whrhw

2015-02-04 11:56:22 +08:00

@learnshare
那电脑上显示的居中怎么解释？

learnshare

2015-02-04 12:16:30 +08:00

@whrhw 我这点知识，解释不出来...

whrhw

2015-02-04 13:58:59 +08:00

@learnshare
还是非常感谢！

laobaozi

2015-06-17 20:24:46 +08:00 via Android

除了table，其他没有明确声明宽度的元素在使用auto左右边距时在不同平台不同浏览器显示不同效果，一般是给它定个最小宽度吧。