使用display时的IE问题：阻止链接

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像素，因为它会重复。

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

除了向服务器发送一个额外请求外，这似乎没有任何副作用。

Answer 2

将CSS中的位置：相对; 放在 #links a {}

like this

它会修复它:)）

Answer 3

将链接文本括在span元素中。然后它将在其范围内的任何地方接受点击。

Answer 4

我不知道为什么，但给锚点背景颜色似乎可以解决这个问题。

Answer 5

在IE9，Chrome和Firefox中，将背景颜色设置为#FFF，不透明度为0。但是不知道其他版本。将它设置为透明对我没有帮助。

这样做的好处是纯CSS和跨浏览器，所以它可能是一个更好的选择。

Answer 6

好的，此问题的解决方法是为锚点提供透明以外的背景属性。一些人建议给锚点一个透明的背景图像。我还有一个补充：图像不一定存在。你可以简单地写任何路径，它将使它工作：

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

Answer 7

将其插入a - 标记样式：

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

其中dot.png是1x1透明图像。