Граница Firefox не отображается

Question

Я использую следующее css

#helper{
position:absolute;
bottom:0;
width:100%;
}

#key{
width:950px;
margin:0 auto;
z-index:2;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
}


<-- inside body -->
<div id="helper">
<div id="key">SHould be rounded top corners?</div>
</div>

Тем не менее в Firefox он не отображается после обновления.Любые идеи, где я должен искать в первую очередь?Спасибо

Answer 1

Укажите фон или границу для элемента #key?

Answer 2

ключ {

width:950px;
margin:0 auto;
z-index:2;
border:1px solid #000;
background-color:#F00;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
}

Вы должны использовать для этого границу или фон.

Answer 3

Хороший вопрос Гарри;

Возможно, потому что мы добавили две строки. Firefox 14 может понравиться всем четырем углам в CSS.

Заменить 2 строки
-moz-граница радиус-верхний-левый: 8px;
-moz-граница радиуса-topright: 8px;

с 4 строками
границы верхнего левого радиуса: 18px;
границы верхнего правого радиуса: 18px;
границы снизу левой радиус: 0px;
границы нижнего правого радиуса: 0px;

для вашего примера:

ключ

{* * тысяча двадцать-один ширина: 290px;
поле: 0 авто;
рамка: 4px solid # 000;
ackground цвет: # EE7621;
границы верхнего левого радиуса: 18px;
границы верхнего правого радиуса: 18px;
границы снизу левой радиус: 0px;
границы нижнего правого радиуса: 0px;
отступы: 5px 0 0 15px;
}

Пример jsfiddle:
http://jsfiddle.net/ccatto/7zAXC/

Мы также можем использовать CSS в качестве класса и идентификатора: http://jsfiddle.net/dFTMh/.

Thx;