码迷,mamicode.com
首页 > 微信 > 详细

Android微信内按钮CSS失效

时间:2016-05-19 06:49:48      阅读:548      评论:0      收藏:0      [点我收藏+]

标签:android   浏览器   blank   target   style   

1.1.1 现象

一个用<a>元素制作的按钮,在微信浏览器中显示的很奇怪,如下图:

技术分享

这个按钮在iPhone的微信以及Android浏览器中打开都是正常的,如下图:

技术分享

正常情况下,根据CSS设置,应该是宽度为80%,居中显示,但是在Android的微信浏览器中宽度就变为auto,也不居中了。

1.1.2 原因

一开始以为是其它的类影响到这个按钮的属性,于是:

· 在这个元素上直接写style,设置其宽度为80%,无效果,设置其宽度为固定值,也无效果;

· 用JS直接设置其宽度为80%或固定值,也无效果;

上面各种修改,用JS查看其宽度属性,一直为auto。

最后仔细查看该元素的所有CSS属性,看到“display:inline”,顿时想到是不是这个原因导致,于是将其改为“display:block”,问题解决。

1.1.3 解决

将display:inline改为display:block,或display:inline-block。

Android微信内按钮CSS失效

标签:android   浏览器   blank   target   style   

原文地址:http://lancelot.blog.51cto.com/393579/1774917

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!