Firefox 5 стайлинг чекбокс странный фон

Код ниже воспроизводит поведение, с которым я столкнулся сегодня, довольно странно (происходит только в Windows). При наведении Firefox раскрашивает checkbox с черной каймой. Как видно на картинке.

черная граница не должна существовать

Все остальные браузеры (Chrome, Safari и все IE) не имеют аналогичного эффекта.

Любая идея о том, как я могу (сохраняя height атрибут) заставить Firefox вести себя?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        #c-box {
            height: 20px;
        }

    </style>
</head>
<body>
        <input id="c-box" type="checkbox">
        <label for="c-box">this is a checkbox</label>
</body>
</html>
Источник

1 ответ

Я испытал такое же поведение в Firefox 5 на Windows XP. Единственный способ, которым я смог устранить черный фон, установив CSS Height значение для auto и используя margin-top чтобы выровнять флажок правильно вместо этого.

Пример:

Примечание. В этом примере #c-box является input type="checkbox элемент.

Вместо

#c-box {
    height: 20px;
}

использование

#c-box {
    margin-top: 5px; /* Test to see which margin value matches the look you desire */
    height: auto;
}

Я знаю, вы упомянули, что вы хотите сохранить height собственность, но это решение работало для меня, не нарушая мою структуру.

Надеюсь, это поможет! Я впервые отвечаю на вопросы здесь, после того, как нашел бесчисленные ответы на свои проблемы.:)

Источник
Другие вопросы по тегам