做的一个手机页面,只在 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
![]() | 1 abelyao 2015-02-03 11:43:07 +08:00 加上 width 属性 |
![]() | 2 Kuro 2015-02-03 11:57:53 +08:00 试试 display: block; 或者 display: inline-block; |
![]() | 5 learnshare 2015-02-03 13:33:31 +08:00 @whrhw button 默认宽度是根据内容计算的(auto),浏览器不知道具体的宽度值(width),就没办法处理左右边距(margin) |
![]() | 6 learnshare 2015-02-03 13:34:30 +08:00 @whrhw <div id="wrapper"> 没关闭 |
![]() | 7 whrhw OP |
![]() | 8 learnshare 2015-02-03 15:28:48 +08:00 @whrhw 撑起来这个动作,是渲染 button 内容之后才能得到总宽度,但这个动作应该是在渲染完 button 的布局之后做的。 |
![]() | 9 whrhw OP |
![]() | 10 learnshare 2015-02-03 18:15:18 +08:00 @whrhw Chrome 是新时代的 IE6,黑魔法 |
![]() | 12 whrhw OP @learnshare 也就是说 Chrome 显示的才是不正常的? |
![]() | 13 whrhw OP @learnshare Chrome是黑魔法的话我又在电脑上的 Firefox(正常模式,不模拟手机) 和手机上的 Firefox测试,FF上“立即生成”这个按钮是居中的 |
![]() | 14 learnshare 2015-02-04 10:07:55 +08:00 @whrhw 不是 Chrome 不正常,我的意思是很多 Chrome 实现的东西其他浏览器都没有,就是功能超出其他浏览器太多,造成了很大的差异性。 |
![]() | 15 whrhw OP @learnshare 那电脑上显示的居中怎么解释? |
![]() | 16 learnshare 2015-02-04 12:16:30 +08:00 @whrhw 我这点知识,解释不出来... |
![]() | 17 whrhw OP @learnshare 还是非常感谢! |
![]() | 18 laobaozi 2015-06-17 20:24:46 +08:00 via Android 除了table,其他没有明确声明宽度的元素在使用auto左右边距时在不同平台不同浏览器显示不同效果,一般是给它定个最小宽度吧。 |