2

我已将border-radius（以及-moz-border-radius对于旧版浏览器）设置为 20px，并且它在 Safari 和 Firefox 中运行良好。然后，我打开 Chrome，它拒绝接受定义的border-radius. 有什么建议可以在 Chrome 中解决这个问题吗？

在此处查看实际的 CSS 编码：http: //jsfiddle.net/MAYea/

Safari 中的屏幕截图：

苹果浏览器

Chrome 中的屏幕截图：

铬合金

4

6 回答 6

6

不是那border-radius不起作用，而是overflow未能隐藏溢出。

这实际上是 Chrome 中的一个新错误。我的世界末日时钟也有类似的问题，尽管它在早期版本的 Chrome 中运行良好。

作为一种解决方法，您可以border-radius在包含的元素以及容器上指定 。

于 2012-12-15T06:18:29.953 回答
2

我有一个类似的问题，它有助于添加

z-index: 0; /* or some other value */

但是也

transform: translateY(0);

似乎这正在启用某种不同的渲染（猜测没有像我们有时对强制 GPU 渲染所做的那样的 3d 上下文......）

这行得通的原因我无法解释，也许其他人可以？

我现在有这个特殊的问题，在 OS X 10.10.5 上使用最新的 Chrome v44 ......是的，我知道这是“固定的”，这是一个老问题 =）......

编辑：在另一个 SO-Question 中找到相同的修复程序，请在此处查看：链接

于 2015-08-21T15:35:46.340 回答
1

-webkit-border-radius:我想你在找什么？

于 2012-12-15T06:17:26.130 回答
1

将border-radius: 20px;CSS 规则添加到两者:before和:after

演示

于 2012-12-15T06:21:02.653 回答
0 
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;


 -webkit-border-radius: for the Chrome

如果您需要它，请从这里尝试这个 javascript 库

于 2012-12-15T06:18:58.433 回答
0

您可以使用，

border-radius: 100

代替，

border-radius: 100px

它会在 IE 中完成这项工作，但在 Chrome 中却不行。

于 2020-01-08T14:12:38.780 回答