-webkit-border-radius的行为与-moz-border-radius不同 [英] -webkit-border-radius acts differently from -moz-border-radius
问题描述
我的网站在Safari和Firefox上显示不同。我想让CSS看起来在Safari上是一样的。我知道我可以使用两个div框,一个为轮廓,一个为图像,但我喜欢如何在Firefox我只需要一个,它曲线的轮廓和图像。
My website is showing up differently on Safari vs Firefox. I would like to have the CSS make it look the same on Safari. I know that I could use two div boxes, one for the outline, one for the image, but I like how on Firefox I only need one and it curves the outline and the image. Is there anyway to have Safari curve the outline and the image?
Safari:
Firefox:
< img src =asset.jpgclass =example>
img.example {
width:250px;
height:250px;
background:rgba(0,0,0,.6);
padding:18px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
}
img.example {
width: 250px;
height: 250px;
background: rgba(0, 0, 0, .6);
padding: 18px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
推荐答案
这是webkit浏览器中的一个已知错误
This is a known bug in webkit browsers
查看此示例
简而言之,是的,现在你必须将图像包装在div中。吮吸。
So in short, yes, for now you have to wrap the image in a div. Sucks.
查看这些错误报告:
http://code.google.com/p/chromium/issues/detail?id=82417
https://bugs.webkit.org/show_bug.cgi?id=30475
现在,将其封装在div中,正如我在这里所做的
For now, wrap it in a div, as I have done here
这篇关于-webkit-border-radius的行为与-moz-border-radius不同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!