Firefox 4中的CSS透明边框问题？
blo*_*ous 16 css transparent firefox4
我正在尝试为工具提示创建一个纯CSS三角形.除了最新的Firefox 4之外,所有浏览器看起来都很好.这是代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<style>
.arrow {
border:50px solid;
border-color:#eee transparent transparent transparent;
display:block;
height:0;
width:0;
top:50%;
right:50%;
position:absolute;
}
</style>
</head>
<body>
<div style="border:1px solid #000; height:400px; width:400px; margin:50px auto; position:relative;">
<span class="arrow"></span>
</div>
</body>
</html>
Firefox 4截图:
其他浏览器截图:
正如你在Firefox 4中看到的那样,它有类似边框的东西.它是一个Firefox bug还是这个行为？
如何在FF4中实现没有可见边框的纯CSS三角形？此外,我需要其他3种颜色是透明的,因为这个三角形将重叠一些元素.
san*_*eep 24
如果transparent不适合你,那么使用rgba可能就是这样.
写:
.arrow {
border-color:#eee rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0);
}
- 我把:`border-color:#eee透明透明; border-color:#eee rgba(255,255,255,0)rgba(255,255,255,0)rgba(255,255,255,0);`我认为这样安全吗？ (5认同)
- 嘿,谢谢你的回答."border-color:#eee rgba(255,255,255,0)rgba(255,255,255,0)rgba(255,255,255,0);"会做的伎俩. (3认同)
All*_*sen 11
好吧,我可以看到问题,并发现如果你将边框样式更改为"outset"如果将在FF4中修复,并且也在IE9中工作.
这会给你这样的东西:
.arrow {
border:50px outset transparent ;
border-top:#eee 50px solid;
display:block;
height:0;
width:0;
top:50%;
right:50%;
position:absolute;
}
PS.我在Vista上使用最新的firefox稳定版.
这是jsFiddle:http://jsfiddle.net/UFSpd/1/
| 归档时间： |
|
| 查看次数： |
5702 次 |
| 最近记录： |