8

我有一个使用边框半径的页面。它不会在原生 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，它被错误地回答为一个没有任何真正答案的一般问题；如果可以的话，我会投反对票，但我认为提供一个写得很好的实际问题会更好。谢谢！

4

4 回答 4

17

事实证明，这个问题特定于 Galaxy S4 和 S4 Active 上的 Android 浏览器。看起来他们已经破坏了对 condensed 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 stock browser CSS3 border-radius support? 我只是在这里重复一遍。但我确实测试了他们的解决方案，现在它在 Galaxy S4 Active 上也能正常工作。

于 2013-07-31T16:00:54.313 回答
1

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

这是一个精心设计和布局的表格，显示了跨浏览器的 HTML5 和 CSS3 支持，但是它没有显示对移动浏览器的支持。

此链接显示对移动设备的支持。

编辑 2019-11-07

几年前，所有现代浏览器都广泛支持 HTML5 和 CSS3，再加上许多旨在提供 polyfill 的 JavaScript 插件，如果您需要支持更旧的浏览器，这个问题和我的原始答案都已经严重过时了。

在那张纸条上，我们在短短 5 年左右的时间里取得了多大的进步，真是令人惊讶:)

新答案：HTML5 和 CSS3 所有的东西！

于 2013-07-31T15:15:55.417 回答
0

我在另一个话题上看到了这个。

在移动设备上工作只需这样做：

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;

告诉我是否有效。氰酸

于 2019-11-04T13:29:30.507 回答
-1

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

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

或删除行

border: 3px solid red

我认为这不是一个错误，我遇到了很多上述工作:) p / s：对不起，我的英语不是很好

于 2014-01-21T07:53:36.793 回答