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

时间:2012-11-19 14:47:05

标签: css firefox

我正在创建一个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中呈现边框。

FF中三角形的屏幕截图 - 有两个三角形,上下三角形,形成相同的阴影 Screen Shot of triangle in FF - There are two triangles, superior and inferior, creating the same shadow

我检查了MAC的FF并且它没有显示三角形的任何边框。

三角形在Chrome,Safari,IE,Opera,MAC和Windows中正确显示

知道为什么会这样吗??

编辑:

您可以在此处查看:https://metrikstudios.com/want/fbapp/triangle-display.php该页面显示上面显示的带有更大三角形的代码

2 个答案:

答案 0 :(得分:2)

尝试使用rgba颜色,如下所示:

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

默认边框颜色为黑色,因此这些边框可能是一个奇怪的过渡工件。 而不是从看不见的黑色变为纯白色,而是从不可见的白色移动到纯白色。

答案 1 :(得分:0)

你的意思是我的例子中两个三角形之间的细线吗?

.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