Firefox: цвет границ, радиус границ и цвет фона создают рваные края и пустое пространство - PullRequest
Новая
       2

Firefox: цвет границ, радиус границ и цвет фона создают рваные края и пустое пространство

8 голосов
/ 14 мая 2011

Взгляните на следующие HTML и CSS. 

.box {
    border-radius: 15px;
    border: #333 solid 3px;
    background: #333;
}

<div class="box">Hello world</div>

Это производит это в Firefox:

enter image description here

Как вы можете видеть, граница и фон div оставляют крошечный промежуток, который виден. Мне нужна граница из-за состояния наведения с другим фоновым цветом.

Как я могу преодолеть это?

1 Ответ

7 голосов
/ 14 мая 2011

Скорее всего, это ошибка в Firefox.Вы можете сделать простой трюк, чтобы решить эту проблему: (это не лучшее решение, я знаю, но проблема кажется серьезной)

разметка : поддельная граница через 'обертку'div 

<div class="wrapper">
    <div class="box">Hello world</div>
</div>

css : заполнение делает трюк 

.wrapper {
    border-radius: 15px;
    background: #333;
    padding:3px; /*simulating border*/
}
.box {
    border-radius: 15px;
    background: #333;
}

http://jsfiddle.net/steweb/peYRf/

ИЛИ более элегантным способом решения проблем (без добавления еще одного div) может быть добавление тени на поле того же цвета фона, чтобы «заполнить» этот белый ужасный материал, например 

.box {
    border:3px solid #333;
    border-radius: 15px;
    background: #333;
    -moz-box-shadow:0px 0px 1px #333; /* just on ffox */
}

http://jsfiddle.net/steweb/Sy2rr/

...