Проблема с прозрачной границей CSS в Firefox 4? - PullRequest
Новая
       5

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

16 голосов
/ 03 июня 2011

Я пытаюсь создать чистый 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 screenshot

Скриншот других браузеров:

enter image description here

Как вы можете видеть в Firefox 4, у него есть нечто вроде границы. Это ошибка Firefox или это действительно поведение?

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

Ответы [ 2 ]

24 голосов
/ 03 июня 2011

, если transparent не работает для вас, тогда используйте rgba, может быть, это работает.

11 голосов
/ 03 июня 2011

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

...