使用display：block链接时IE出现问题

Question

This is my 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>

And these are the CSS styles:

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

#links a {
    display: block;
}

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

This displays a list of links, the problem is that in IE, I can only click a link by directly clicking the text link, which is not the case with other browsers (where you can click anywhere whether the text link or anywhere else as long as it's in the link block), is there any fix for that (with only CSS, no javascript)?

Please note that I don't want to specify a width for the links or the div.

Answer 1

I have had the same problem and none of the solutions above worked for me. I also needed the background of the links to be transparent.

A very uncomfortable solution, but one that worked perfectly is to set the background to a transparent gif. Only needs to be 1x1 px as it will repeat.

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

This seems to have no side effects apart from one additional request to the server.

Answer 2

Put position:relative; in your CSS at #links a{ }

like this

It will fix it :)

Answer 3

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

Answer 4

Enclose the link text in a span element. Then it will accept clicks anywhere within its bounds.

Answer 5

Setting the background color to #FFF and an opacity of 0 worked for me in IE9, Chrome and Firefox. Don't know about other versions though. Setting it to transparent didn't help me.

This has the advantage of being pure CSS and cross-browser, so maybe it could be a better alternative.

Answer 6

Ok, the fix for this problem is to give the anchors a background property other than transparent. Some proposed to give the anchors a transparent background image. I have an addition to this: The image does not have to exist. You can simply write any path and it will make it work:

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

Answer 7

Insert this inside your a -tag style:

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

where dot.png is a 1x1 transparent image.