Safari中可怕的图像边框半径

Question

我知道这个问题已经被问过一百万次了，但每个解决方案似乎都有点不同，我似乎无法让我读过的任何帖子都为我工作。

我正在构建一个支持 WooCommerce 的网站，但 Safari 中的图像边框半径存在问题。我对 CSS 很陌生，想象问题和解决方案的规模正在逃避我。由于这是一个很常见的问题，所以我会很简短。

这是布局：

• 使用 Woothemes 设置我的商店
• 我已在商店中为我的拇指设置了图像边框半径
• 在 Firefox 中看起来很棒，在 Safari 中看起来很糟糕。
• 我根本不知道如何使用我一直在阅读的解决方案使其工作。我敢肯定有一些简单的东西我还没有掌握。

这里是商店的链接：http://printologie.com/shop/ - 以及出现相同问题的单个产品页面：http://printologie.com/shop/akuafoil-cards/

这是来自我的 custom.css 的代码（简单的 -webkit 标记似乎无法修复它）：

ul.products li a img {
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #FFFFFF;
    border-radius: 80px 60px 80px 60px;
    box-shadow: 0 0 0 0 transparent;
    display: block;
    height: auto;
    margin-bottom: 0.75em;
    padding: 4%;
    width: 91%;
}

感谢您对修复的任何想法和解释。

Answer 1

边框半径是一个 css3 属性。因此，如果您正在为您的项目使用，那么您必须添加所有供应商前缀。比如Opera -o-，chrome 和safari -webkit-，Firefox -moz-，以及Microsoft -ms-。

所以你的财产看起来像：

-webkit-border-radius:80px 60px 80px 60px;
-moz-border-radius:80px 60px 80px 60px;
-o-border-radius:80px 60px 80px 60px;
-ms-border-radius:80px 60px 80px 60px;
border-radius:80px 60px 80px 60px;