IE8- CSS наведение не работает с границей и отступами, установленными на 0 - PullRequest
Новая
       31

IE8- CSS наведение не работает с границей и отступами, установленными на 0

2 голосов
/ 03 марта 2011

Тестовая страница: 

<!DOCTYPE html>
<html>
    <head>
        <title>button border hover test</title>
        <style type="text/css">
            input
            {
                border: 0;
                padding: 0;
            }

            input:hover
            {
                background-color: fuchsia;
            }
        </style>
    </head>
    <body>
        <form>
            <input type="button" value="input element" /><br>
        </form>
    </body>
</html>

Цвет фона не меняется. Если вы установите отступы выше 0, цвет фона изменится. Я не вижу такого поведения в Firefox.

Наличие отступа 1px не нарушает компоновку, но кто-нибудь знает, как сделать эту работу с отступом 0?

Ответы [ 2 ]

3 голосов
/ 18 октября 2011

Есть два возможных решения.

  1. Вместо этого используйте элемент <button>.
  2. Используйте отступы. Но даже тогда иногда зависание не работает.

Некоторая соответствующая информация от http://www.sitepoint.com/forums/showthread.php?769898-button-vs.-input-type-quot-button-quot

<button> может содержать HTML, и его легче стилизовать с помощью CSS, который на самом деле применяется во всех браузерах. Тем не менее, есть некоторые Недостатки использования его в IE. IE не может правильно определить значение атрибут (и использует вместо содержимого содержимое тега), и все значения отправляются на сервер независимо от того, нажата кнопка или нет. Это делает его немного хитрым.

<input type="submit"> не имеет проблем со значением или обнаружением. Тем не менее, вы не можете добавить HTML, как с и можете использовать только тег значения. Это также сложнее, и стиль не всегда хорошо реагировать во всех браузерах.

2 голосов
/ 14 апреля 2011

Добро пожаловать в клуб.Это сводило меня с ума.У меня есть таблица с кнопками в последнем столбце.Когда вы наводите курсор на строку, фон меняется.Если навести курсор на кнопку в строке, цвет текста на кнопке изменится так же, как и фон строки.У меня было 0 отступов на кнопках.Все это прекрасно работает в FF без проблем.

В IE8, целая история.Наведение строки отлично работает, но когда вы зависаете над кнопкой в ​​ряду, ничего не происходит.Фон строки не изменился, а цвет текста кнопки не изменился (99,99% времени).

Я поиграл с этим и наконец понял, что происходит.Похоже, что при наведении на текст кнопки не работаетЯ добавил 20px отступов с каждой стороны текста на кнопке.Если я перемещаю курсор вниз по кнопкам в области дополнения (не касаясь текста), это работает так же хорошо, как FF.Как только я перемещаю курсор вниз по центру кнопок (через текст кнопки), он ломается.

Перейти рисунок.Я ненавижу IE !!!!

...