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

Это мой 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 я могу только щелкнуть ссылку, нажав на текстовую ссылку, что не так с другими браузерами (где вы можете щелкнуть где угодно, будь то текстовая ссылка или где угодно else до тех пор, пока он находится в блоке ссылок), есть ли какое-либо исправление для этого (только с CSS, без javascript)?

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

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

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

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

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

Ответ 3

Поместите позицию: relative; в свой CSS на #links a {}

как это

Он исправит это:)

Ответ 4

Я понятия не имею, почему, но предоставление якоря цвет фона, похоже, устранил эту проблему для меня.

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

Вставьте это в свой стиль a -tag:

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

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