CSS透明边框在Windows FF中显示边框

Question

我正在创建一个CSS三角形，代码如下:

display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 0px 9px 9px;
border-color: transparent transparent rgb(255, 255, 255);
position: absolute;
top: 14px;
left: 133px;

问题在于使用Windows 7的Firefox 16.0.2渲染三角形时会出现边框。

Firefox中三角形的屏幕截图 - 有两个三角形，上下相同，产生了相同的阴影。

我在MAC的Firefox中检查过，它不会显示三角形的任何边框。

三角形在Chrome、Safari、IE、Opera、MAC和Windows中都能正确显示。

有任何想法为什么会发生这种情况吗？

编辑：

您可以在此处检查：https://metrikstudios.com/want/fbapp/triangle-display.php该页面显示了上述代码，并带有一个更大的三角形。

- Dan Stern

---

三角形在哪里 - http://jsfiddle.net/HvMAt/ - Jawad

图像中有两个三角形。一个在右下方，另一个在右上方。它们都是白色的，但是它们在左侧面呈现出边框。 - Dan Stern

图片在哪里？ - Jawad

可能你的图片链接已经损坏了 - http://i.stack.imgur.com/Wn6zw.png - Jawad

@BoltClock：奇怪。在Windows 7上的IE9中没有显示任何图像。一定又是我的该死的ISP问题。 - Jawad

Answer 1

尝试使用rgba颜色，像这样：

border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgb(255, 255, 255);

默认的边框颜色是黑色，所以也许这些边框只是奇怪的过渡效果。 不要从无形的黑色到实心白色，而应该从无形的白色到实心白色。

- daveyfaherty

---

我需要透明边框，因为我正在创建一个三角形。 - Dan Stern

rgba(255, 255, 255, 0) 是透明的，它在 0% 不透明度下是全白色。相信我，它会做你需要的事情，我已经运行了浏览器截图等一切。 - daveyfaherty

嘿，我误读了你的帖子。我以为你是指用其他RGB颜色替换透明色。非常好的解决方案，谢谢！ - Dan Stern

Answer 2

你是指我示例中两个三角形之间的细线吗？

.one {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 0px 90px 90px;
    border-color: transparent transparent rgb(0, 0, 0);
    position: absolute;
}
.two {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 0px 90px 90px;
    border-color: transparent rgb(0, 0, 0) transparent;
    position: absolute;
}


<div class="one"></div>
<div class="two"></div>

我在测试过的每个Win7浏览器上都看到了这行。我认为它是以这种方式呈现的，你无法摆脱它。Fiddle

- netS

---

不是的，这是三角形的一条边。在我的情况下，我只是连接了两个三角形，但即使我只使用其中一个三角形，该线也会显示出来。这条线只在Windows的FF中呈现，而不在任何其他浏览器/操作系统中。您可以尝试我的代码自行查看。 - Dan Stern

我已经尝试过你的代码，但在FF Win7中没有任何输出。所以我认为你的意思是类似于我给出的示例。 - netS

你可以在这里检查：https://metrikstudios.com/want/fbapp/triangle-display.php。有一个三角形和一条线。我刚在FF 16.0.2 Win7中检查了一下，我看到了那条线。 - Dan Stern

同样的操作系统和同样的Firefox浏览器在两个设备上，但仍然没有连线。 - netS