Firefox 4 中的 CSS 透明边框问题？答案

【问题标题】：CSS Transparent Border Problem In Firefox 4?Firefox 4 中的 CSS 透明边框问题？
【发布时间】：2011-06-03 09:29:38
【问题描述】：

我正在尝试为工具提示创建一个纯 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 的错误还是真的是这种行为？

如何在 FF4 中实现没有可见边框的纯 CSS 三角形？另外，我需要其他 3 种颜色是透明的，因为这个三角形会重叠一些元素。

【问题讨论】：

我正在使用 FF4，但我没有得到你描述的这种奇怪的行为。你没有使用 FF4 Beta 什么的？
我无法重现这个。使用Firefox 4/Windows 7，没有“边框”，看起来和其他浏览器一样。
我在 Windows 7 中使用 Firefox 4.0.1，我也在 Windows XP FF 4.0.1 中尝试过
如果使用红色等深色，则边框不可见。但如果使用#eee等浅色，则非常显眼。

标签： css transparent firefox4

【解决方案1】：

如果transparent 不适合您，那么使用rgba 可能就可以了。

写：

.arrow {
    border-color:#eee rgba(255,255,255,0)  rgba(255,255,255,0)  rgba(255,255,255,0);
}

【讨论】：

仍然像截图一样有一个可见的边框。
您好，谢谢您的回答。 " border-color:#eee rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); " 就可以了。
注意：rgba 并不适用于所有浏览器，您可能想在 IE 中测试它
我输入：border-color:#eee transparent transparent transparent; border-color:#eee rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); 我觉得安全吗？
+1 是的，这个技巧在 IE 中起作用，因为 IE 支持透明而不是 rgba

【解决方案2】：

好的，我看到了问题，发现如果将边框样式更改为“开始”，则将在 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/

【讨论】：

我之前尝试过“初始”边框类型，但问题是它不再是真正的颜色了。 #eee 将变为 $f6f6f6
“开始”的边框类型在右下边会有真实的颜色，但上边和左边会产生不同的颜色。
你是否使用了我的代码，这似乎在这里工作，#eee 仍然是#eee，他们没有真正的颜色请看这里：jsfiddle.net/UFSpd/2
顺便说一句，在 photoshop 中测试了颜色，它仍然是#eeeeee
是的，我在 Photoshop 中测试过，它变成了#f6f6f6。我之前也尝试过这种解决方法，但我认为只有 Safari 不会改变颜色。如果使用“outset”，其他浏览器会产生较浅的颜色