Android微信内按钮CSS失效-创新互联

1.1.1 现象

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

创新互联是一家专注于成都做网站、成都网站设计与策划设计,江干网站建设哪家好?创新互联做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:江干等地区。江干做网站价格咨询:028-86922220

Android微信内按钮CSS失效

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

Android微信内按钮CSS失效

正常情况下,根据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。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前题目:Android微信内按钮CSS失效-创新互联
网址分享:http://azwzsj.com/article/jjgpp.html