Проблема с IE при использовании display: блок для ссылок

Question

Это мой HTML:

<div id="links">
  <a href="">Link 1</a>
  <a href="">Link 2</a>
  <a href="">Link 3</a>
  <a href="">Link 4</a>
</div>

А это стили CSS:

#links {
    position: absolute;
    border: 1px solid #000;
}

#links a {
    display: block;
}

#links a:hover {
    background-color: #CCC;
}

Это отображает список ссылок, проблема в том, что в IE я могу щелкнуть ссылку, только щелкнув текстовую ссылку, что не имеет место в других браузерах (где вы можете щелкнуть в любом месте, будь то текстовая ссылка или где угодно еще, пока он находится в блоке ссылок), есть ли какое-то решение для этого (только с CSS, без JavaScript)?

Обратите внимание, что я не хочу указывать ширину для ссылок или div.

Answer 1

У меня была такая же проблема, и ни одно из приведенных выше решений не помогло мне. Мне также нужно, чтобы фон ссылок был прозрачным.

Очень неудобное решение, но отлично работающее - установить фон в прозрачный gif. Только должно быть 1x1 px, как это будет повторяться.

#links a
{
    display: block;
    background: url(/images/interface/blank/1dot.gif);
}

У этого, похоже, нет побочных эффектов, кроме одного дополнительного запроса к серверу.

Answer 2

Положите положение: относительное; в вашем CSS на # ссылки {}

как это

Это исправит:)

Answer 3

Понятия не имею, почему, но придание якору цвета фона, казалось, решило эту проблему для меня.

Answer 4

Заключить текст ссылки в элемент span. Затем он будет принимать клики в пределах своих границ.

Answer 5

Установка цвета фона на #FFF и непрозрачность 0 работали для меня в IE9, Chrome и Firefox. Не знаю о других версиях, хотя. Установка его на прозрачный мне не помогла.

Преимущество состоит в том, что он является чистым CSS и кросс-браузерным, так что, возможно, это может быть лучшей альтернативой.

Answer 6

Хорошо, решение этой проблемы - дать якорям фоновое свойство, отличное от прозрачного. Некоторые предлагали дать якорям прозрачное фоновое изображение. У меня есть дополнение к этому: изображение не должно существовать. Вы можете просто написать любой путь, и он заставит его работать:

a {
  background:url('dummy/doesnotexist.png') no-repeat;
}

Answer 7

Вставьте это в ваш a стиль тега:

background:url('images/dot.png') no-repeat;

, где dot.png - прозрачное изображение 1x1.