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

Border radius是一个css3属性。因此，如果您使用的是项目，那么您必须添加所有供应商前缀。喜欢歌剧-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;

Safari中的可怕图像边界半径

1 个答案: