image - 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-.

因此您的属性(property)将如下所示:

-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;