边界半径不适用于chrome中的相对定位图像

时间:2012-07-26 12:18:33

标签: jquery html css css3 google-chrome

我有一个带有以下样式的div:

overflow:hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

里面有一个图像,但高度与另一个div的高度相对应,包含文字。

如果div包含的文本不足,则图像会在第一个div中向上移动。由于隐藏了溢出,你不会看到这个。所有这一切都很顺利,直到我想给第一个div提供一个边界半径,它只是没有显示出来。这只发生在chrome,firefox和IE中它确实有效。

2 个答案:

答案 0 :(得分:0)

这是div内部图像的边界半径,我不完全理解你的问题是什么,所以修改我做的JSFiddle来向我展示它实际上是什么。

http://jsfiddle.net/JGQwp/

答案 1 :(得分:0)

我不知道你想要达到什么样的效果,但是这里有一个例子可以在Chrome(和其他人)中使用,方法是将图像设置为背景图像。

http://jsfiddle.net/dnsyn/1/

将半径应用于图像:

http://jsfiddle.net/dnsyn/2/

此外,border-radius属性在所有支持它的浏览器中都是“未加前缀”的,因此您只需要:

    border-radius: 20px;