Проблема прозрачной границы CSS в Firefox 4?

Я пытаюсь создать чистый 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 или это действительно поведение?

Как я могу достичь чистого CSS-треугольника без этой видимой границы в FF4? Кроме того, мне нужно, чтобы другие 3 цвета были прозрачными, потому что этот треугольник будет перекрывать некоторые элементы.

Ответ 1

Если transparent не работает для вас, то использовать rgba может быть, что работа.

Запись:

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

Ответ 2

Хорошо, я мог видеть проблему и выяснил, что если вы измените стиль границы на "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/