现代原生Android浏览器中border-radius无效

Question

现代原生Android浏览器中border-radius无效

8

我有一个页面使用了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/ 我尝试过添加padding和不添加padding，使用box-sizing和不使用box-sizing，但它仍然显示为锐角。如果有帮助或见解，将不胜感激。

我意识到有人在(边框半径样式在Android浏览器中无效)下发布过这个问题，但他没有提供任何代码、JSFiddle，而且答案也是一个没有真正回答的普遍性问题；如果可以的话，我会给它点踩的，但我认为提供一个实际而且写得好的问题会更好。谢谢！

- HBlackorby

我已在 Galaxy S4 Active 上的 Android 设备上测试过它，因此是最现代的 Android 原生浏览器。 - HBlackorby

不同的浏览器支持不同的HTML5和CSS3功能，这只是Web开发的一部分。 - Robadob

我对此并不介意，但根据http://caniuse.com/border-radius的说法，它应该在Android浏览器中运行，因此我正在尝试查看是否存在浏览器实现中的错误，或者我的CSS存在冲突或CSS编写方式导致了问题。 - HBlackorby

很有可能该网站是错误的或者指的是不同的浏览器（如果一些网络/制造商替换了默认浏览器并进行了其他更改，我也不会感到惊讶）。 - Robadob

你的回答让我想到了这是否是与这款手机型号有关，而不是Android浏览器的问题，然后我找到了这个链接（当然是在昨天搜索了几个小时S/O之后）https://dev59.com/vWQm5IYBdhLWcg3w-jBL - HBlackorby

4个回答

1

不幸的是，一些浏览器并不支持某些HTML5和CSS3属性。我建议你在设计网站时要让其在所有浏览器中都能正常运行和显示，并在此基础上再添加CSS3和HTML5元素。

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

这个链接显示了移动设备的支持情况。

编辑 2019-11-07

随着HTML5和CSS3在现代浏览器中得到广泛支持，甚至可以追溯到几年前，再加上许多JavaScript插件旨在提供polyfill以支持更老的浏览器，这个问题和我的原始答案都已经过时。

就此而言，我们在短短的五年左右时间里取得了非常惊人的进步 :)

新回答：使用HTML5和CSS3！

- samrap

根据您提供的链接（第二个链接），Android 浏览器应该支持圆角，因此我又开始怀疑是否是我在 CSS 中特别设置了什么导致它无法正常显示。 - HBlackorby

是的，这真的很奇怪。我从未在任何浏览器中遇到过边框半径问题。但是你的代码看起来完全没问题。 - samrap

如果这是一个按钮，我假设你有一个:hover伪类？如果是这样，请尝试在上面设置边框半径。由于它在层叠中较低，可能会覆盖边框半径到默认值，即无。只是瞎猜 @HBlackorby - samrap

没有:hover，但我在另一篇帖子下读到了答案；昨天我当然是在搜索“Android”，而不是“Galaxy S4”。在现代手机中发现这样一个非常奇怪的故障。 - HBlackorby

0

我在另一个帖子中看到这个。

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

border-collapse: separate;

使用border-radius属性（我也尝试过分别使用border-radius）

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

告诉我是否有效。再见。

- Punisher07

这个问题特别针对于随 Galaxy S4（和那个时期的其他手机）一起发货的原生 Android 网页浏览器应用程序。自从 Galaxy 停止使用原生 Android 浏览器以来，这个问题已经得到解决，因此在任何现代 Galaxy 手机上都不再是一个问题。此外，我相信未来版本的 Android 网页浏览器已经修复了这个问题。 - HBlackorby

哦，抱歉，我没看到这个。如果不必要的话，任何管理员都可以删除我的评论。对此感到抱歉。 - Punisher07

-1

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

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

或删除行

border: 3px solid red

我认为这不是一个 bug，我遇到过很多类似的工作 :) 附言：抱歉我的英语不是很好

- user3213664

将CSS拆分为单独的属性可以解决上面关于此问题的答案。背景颜色或常规边框CSS没有任何问题。 - HBlackorby

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- HBlackorby · Accepted Answer

事实证明，这个问题只存在于Galaxy S4和S4 Active上的安卓浏览器。看起来他们破坏了对于紧凑边框半径属性的支持，但是如果你分别指定每个角落，它就可以正常工作。我会向安卓发布一个bug报告。所以，如果你这样做：

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上也能正常工作了。