Вопросы Теги

Проблема прозрачной границы 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 screenshot

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

enter image description here

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

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

16
задан bloggerious 3 June 2011 в 09:29
поделиться