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。