Android微信内按钮CSS失效

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。