Html 使用 display:block for links 时 IE 的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/881620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Problem with IE when using display:block for links
提问by Waleed Eissa
This is my HTML:
这是我的 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:
这些是 CSS 样式：
#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)?
这会显示一个链接列表，问题是在IE中，我只能通过直接单击文本链接来单击链接，而其他浏览器则不是这种情况（无论是文本链接还是其他任何地方，您都可以单击任意位置）因为它在链接块中），是否有任何解决方法（只有 CSS，没有 javascript）？
Please note that I don't want to specify a width for the links or the div.
请注意，我不想为链接或 div 指定宽度。
采纳答案by Mark Dickinson
Enclose the link text in a span element. Then it will accept clicks anywhere within its bounds.
将链接文本括在 span 元素中。然后它将接受在其范围内的任何地方的点击。
回答by Steven Wilber
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.
一个非常不舒服的解决方案，但一个完美的解决方案是将背景设置为透明的 gif。只需要 1x1 像素，因为它会重复。
#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.
除了对服务器的一个额外请求之外，这似乎没有任何副作用。
回答by vsync
回答by Andrew
I have no idea why, but giving the anchor a background color seemed to fix this problem for me.
我不知道为什么，但是给锚点一个背景颜色似乎对我来说解决了这个问题。
回答by Denis Lins
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.
在 IE9、Chrome 和 Firefox 中将背景颜色设置为 #FFF 和不透明度为 0 对我有用。其他版本不知道。将其设置为透明对我没有帮助。
This has the advantage of being pure CSS and cross-browser, so maybe it could be a better alternative.
这具有纯 CSS 和跨浏览器的优点，所以也许它可能是一个更好的选择。
回答by Lukas
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;
}
回答by idealmedia
Insert this inside your a-tag style:
将此插入到您的a-tag 样式中：
background:url('images/dot.png') no-repeat;
where dot.pngis a 1x1 transparent image.
哪里dot.png是 1x1 透明图像。
