Html 绝对定位的锚标记（无文本）在 IE 中不可点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6914822/
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
absolute positioned anchor tag (with no text) not clickable in IE
提问by MikeM
I have two anchors positioned absolute on top of an image, the links are clickable in other browsers (Chrome, FF, Safari) but not in IE (tested in 8 & 9 so far)
我有两个绝对定位在图像顶部的锚点，链接在其他浏览器（Chrome、FF、Safari）中可点击，但在 IE 中不可点击（目前已在 8 和 9 中测试）
The strange thing is if I give the links a background-colorthey are clickable, however if the background-coloris set to transparent(which is what I want) they are no longer clickable, I've also tried setting zoom:1but no luck. I guess the hasLayoutbit in IE went away with IE 8/9 so guessing zoomdoesn't matter now for this kind of issue.
奇怪的是，如果我给链接一个background-color它们是可点击的，但是如果background-color设置为transparent（这是我想要的）它们不再可点击，我也尝试过设置zoom:1但没有运气。我猜hasLayoutIE 中的这一点随着 IE 8/9 消失了，所以zoom现在猜测对于这种问题并不重要。
Any ideas to make these links show up in IE 8/9 with a transparent bg?
有什么想法可以使这些链接显示在带有透明 bg 的 IE 8/9 中吗？
Here's the fiddle I've been working with: jsFiddle example
这是我一直在使用的小提琴：jsFiddle example
I have the following HTML layout:
我有以下 HTML 布局：
<div id="content">
<img src="http://placehold.it/724x300" width="724" height="300" alt="woot" />
<div id="countdown"></div>
<a id="link1" href="http://www.stackoverflow.com" title="link1"></a>
<a id="link2" href="http://www.stackoverflow.com" title="link2"></a>
</div>
and CSS:
和 CSS：
body {text-align:center;}
#content {position:relative; width:724px; height:300px; margin:0 auto;}
#countdown {position:absolute; width:650px; height:110px; top:100px; left:30px; background-color:blue;}
#link1 {position:absolute; width:520px; height:35px; bottom:20px; left:0;}
#link2 {position:absolute; width:200px; height:35px; bottom:20px; right:0;}
采纳答案by Michael Giovanni Pumo
I have had this exact problem before and it has always annoyed the hell out of me. I'm never sure why it happens, but I always create a 1px by 1px transparent PNG (or GIF) and use that in your background declaration like so:
我以前遇到过这个确切的问题，它总是让我很恼火。我永远不知道为什么会发生这种情况，但我总是创建一个 1px x 1px 的透明 PNG（或 GIF）并在您的背景声明中使用它，如下所示：
a { background: url("/path/to/image.png") 0 0 repeat; }
Hope this helps.
希望这可以帮助。
PS - Don't specify any actual background colour with this. Just use the example above and it should work.
PS - 不要用这个指定任何实际的背景颜色。只需使用上面的示例，它应该可以工作。
In addition to this, try and set your anchor tags to display as block and perhaps also insert a non-breaking space in them (since they are empty at the moment and that might be tripping IE up):
除此之外，尝试将您的锚标记设置为显示为块，并可能还在其中插入一个不间断的空格（因为它们目前是空的，这可能会导致 IE 跳闸）：
a { display: block; background: url("/path/to/image.png") 0 0 repeat; }
<a href="#"> </a>
回答by Dio F
You can do it using the mentioned background-imagetrick. When you do not want to use a transparent image for this, just use an unknown scheme or about:blankin the image URL.
你可以使用提到的background-image技巧来做到这一点。当您不想为此使用透明图像时，只需使用未知方案或about:blank在图像 URL 中。
a { background-image: url("iehack:///"); }
or
或者
a { background-image: url("about:blank"); }
This works at least in IE 8 + 9 (the only IEs I tested) and in current versions of Firefox and Chrome. It is still valid CSS and causes no additional traffic. The first "hack" may give a JS error in Chrome (and maybe others) when using jquery. The latter only (but surely) gives a MIME-Type warning in Chrome due to the wrong MIME-Type of the about:blankdocument.
这至少适用于 IE 8 + 9（我测试过的唯一 IE）以及当前版本的 Firefox 和 Chrome。它仍然是有效的 CSS，不会导致额外的流量。使用 jquery 时，第一个“hack”可能会在 Chrome（也可能是其他人）中出现 JS 错误。由于about:blank文档的MIME-Type 错误，后者仅（但肯定）在 Chrome 中给出 MIME-Type 警告。
回答by morewry
Transplanted from a comment I posted some time ago.
移植自我前段时间发表的评论。
Little longer, but still no traffic, base 64 encoded transparent gif:
稍长一点，但仍然没有流量，base 64 编码的透明 gif：
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICR??AEAOw==')
This has its own pros/cons, but can be useful. Also:
这有其自身的优点/缺点，但可能很有用。还：
background-color: rgba(0,0,0,0)
I've used this one more recently
我最近又用了这个
回答by MikeM
@tw16's comment mentioning invisiblegot me thinking about opacity.
@tw16 的评论invisible让我想到了opacity.
Combining IE's filter:alpha(opacity=0)with background-color:#fff(or any color) appears to be a good solution for this. Tested and works in IE 7-9 (6 isn't applying the opacity filter for some reason but I'm not required to support 6 so this will work)
将 IEfilter:alpha(opacity=0)与background-color:#fff（或任何颜色）结合似乎是一个很好的解决方案。在 IE 7-9 中测试和工作（6 出于某种原因没有应用不透明度过滤器，但我不需要支持 6 所以这会工作）
The 1x1 image solution is globally effect so I'm going to give the check to him.
1x1 图像解决方案具有全局效果，因此我将把支票交给他。
Thanks for the answers.
感谢您的回答。
回答by Jim
I had the same problem. My working solution was to add a border to the appropriate anchor. Like the following example. One advantage is, you need no extra image.
我有同样的问题。我的工作解决方案是为适当的锚点添加边框。像下面的例子。一个优点是，您不需要额外的图像。
a { border-right: 1px solid transparent }
回答by cdeszaq
IE has a nasty habit of not making links work as expected when they don't have any content. To fix this, give each link a for content.
IE 有一个坏习惯，当链接没有任何内容时，它们不会按预期工作。要解决此问题，请为每个链接指定一个 内容。
Another thing to try is to set display: block;on the links to make IE flow them as block-level elements rather than as in-line elements. This can also help is you need the links to be empty.
另一件要尝试的事情是设置display: block;链接，使 IE 将它们作为块级元素而不是行内元素流动。如果您需要将链接设为空，这也有帮助。
