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 style doesn't work in android browser），但是他没有提供任何代码，JSFiddle，并且在没有任何真实答案的情况下，它被错误地回答了一般性问题;如果可以的话，我会对它进行投票，但我认为提出一个实际写得很好的问题会更好。谢谢！

Answer 1

原来，这个问题特定于Galaxy S4和S4 Active上的Android浏览器。看起来他们已经破坏了对精简边框半径属性的支持，但是如果你单独指定每个角落，它就可以正常工作。我正在向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 stock browser CSS3 border-radius support? 我只是在这里重复一遍。但我确实测试了他们的解决方案，现在它在Galaxy S4 Active上工作正常。

Answer 2

不幸的是，有些浏览器不支持某些HTML5和CSS3属性。我的建议和你在网上找到的一般建议是设计你的网站，使其在所有浏览器中运行和看起来很好，然后返回并添加CSS3和HTML5元素作为额外的。

这是一款设计精良且布局合理的table showing HTML5 and CSS3 support across browsers，但它不支持移动浏览器。

This link表示对移动设备的支持。

Answer 3

我在另一个主题上看到了。

要在移动设备上工作，只需执行以下操作：

border-collapse: separate;

具有边界半径（我也尝试将边界半径分开）

border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-collapse: separate;

告诉我是否可行。 Cya

Answer 4

我认为你的代码没有错，它无法在平板设备上显示。背景边框应该必须修复此错误，你应该删除行

background-color: #521c0b; 
color: #FFFFFF;

或删除行

border: 3px solid red

我认为这不是一个错误，我已经遇到了很多上面的工作:) p / s：抱歉，我的英语不是很好

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

4 个答案: