border-radius在现代原生Android浏览器中不起作用

Question

我有一个使用border-radius的页面.它不会在原生Android浏览器中显示四舍五入; 它显示方角.它显示在桌面Chrome,IE,FF等精细,但不在本机手机浏览器中.有谁知道这是浏览器本身的问题,我不使用的一些额外的CSS扩展等等？

这是我的CSS(在演示中):

.bigButton2
{
    width: 320px; height: 200px; margin: auto;
    padding: 20px;
    background-color: #521c0b; color: #FFFFFF;
    border: 3px solid #e3b21e;
    border-radius: 30px;    
   -webkit-border-radius: 30px;
   -moz-border-radius: 30px;
}   

我已经建立了一个JSFiddle:http://jsfiddle.net/VJvQA/

我试过填充,没有填充,没有盒子大小,没有盒子大小,它只是显示为尖角.任何帮助或见解将不胜感激.

我意识到有人发布了这个(border-radius风格在android浏览器中不起作用),但是他没有提供任何代码,JSFiddle,并且它被错误地回答了一般性问题而没有任何真正的答案; 如果可以的话,我会对它进行投票,但我认为提出一个实际写得很好的问题会更好.谢谢!

Answer 1

事实证明,这个问题特定于Galaxy S4和S4 Active上的Android浏览器.看起来他们已经破坏了对浓缩border-radius属性的支持,但是如果你单独指定每个角,它就可以正常工作.我正在向Android发布错误报告.所以,如果你这样做:

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

它工作正常; 如果你只有border-radius:10px; 它被忽略了.

这是在这篇文章回答: Galaxy S4股票浏览器CSS3 border-radius支持？ 我只是在这里重复一遍.但我确实测试了他们的解决方案,现在它在Galaxy S4 Active上工作正常.