Firefox4中的CSS透明边框问题？
Firefox4中的CSS透明边框问题？
提问于 2011-06-03 17:29:38
我正在尝试为工具提示创建一个纯CSS三角形。除了最新的Firefox4之外，所有的浏览器看起来都很好。代码如下：
<!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>Firefox4屏幕截图：
其他浏览器屏幕截图：
正如你在Firefox4中看到的，它有一个类似边框的东西。是Firefox的bug，还是真的是这样的行为？
如何在FF4中实现没有可见边框纯CSS三角形？另外，我需要其他3种颜色是透明的，因为这个三角形会重叠一些元素。
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-06-03 17:44:45
如果transparent对您不起作用，那么使用rgba可能就是工作。
写入：
.arrow {
border-color:#eee rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0);
} Stack Overflow用户
发布于 2011-06-03 17:44:23
好的，我可以看到这个问题，并且发现如果你将边框样式改为“开始”，它将在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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6225284
复制相关文章
相似问题