不可点击的锚标记
我使用这个 html 代码
<div class="titleIn">
<h2><a href="/link2">link2</a></h2>
</div>
，由于某种原因 link2 不可点击（没有手形光标）
CSS 是：
.titleIn {
direction: rtl;
margin-bottom: 10px;
margin-right: 0;
margin-top: -10px;
position: relative;
text-align: right;
z-index: -1;
}
知道吗？
I use this html code
<div class="titleIn">
<h2><a href="/link2">link2</a></h2>
</div>
and for some reason the link2 is not clickable (no hand cursor)
The CSS is:
.titleIn {
direction: rtl;
margin-bottom: 10px;
margin-right: 0;
margin-top: -10px;
position: relative;
text-align: right;
z-index: -1;
}
Any idea?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我不能说我知道原因，但我知道是什么原因造成的：您的
z-index：-1。如果删除它，问题就会消失（至少，在 Chrome、Firefox 和 Opera 上对我来说是这样；但在 IE6 或 IE7 上则不然）。这是示例的实时副本，以及更新后的副本，改为z-index: 0。通过给它一个小于零的
z-index，你将它放在主流程内容的下面，我猜文档不会让事件通过它（就像任何带有非透明背景设置）。IE 似乎对
direction: rtl;和position:relative;的组合有一个单独的问题，但我认为这是一个单独的问题。如果我删除.titleIn中除direction: rtl; 之外的所有样式position:relative;，IE仍然崩溃（链接无法点击）。如果我删除其中任何一个，IE 就会开始工作（但是当然，您的布局不会执行您想要的操作）。I can't say I know why, but I know what's causing it: Your
z-index: -1. If you remove that, the problem goes away (at least, it does for me on Chrome, Firefox, and Opera; not on IE6 or IE7, though). Here's a live copy of your example, and an updated copy withz-index: 0instead.By giving it a
z-indexless than zero, you're putting it below the main flow content, and I guess the document isn't letting the event pass through it (just like any element with a non-transparent background setting).IE seems to have a separate issue with the combination of
direction: rtl;andposition: relative;, but I think it is a separate issue. If I remove every style in.titleInexceptdirection: rtl; position: relative;, IE still breaks (the link is unclickable). If I remove either of those, IE starts working (but of course, your layout doesn't do what you want).除非您将正文的 z-index 设置为 <-1，否则您实际上是将链接放在整个页面正文的后面，当然它是不可点击的。 （正文和标题等元素将跨越其定义的整个宽度，从而无形地阻挡其他可能可见但不可点击的元素）
如果您使用 Firebug，它将通过突出显示标签区域来很好地说明这一点。
Unless you made the body's z-index <-1, you are essentially putting the link behind the entire body of the page, of course it's not click-able. (Elements such as body and headings will span the entire width that it is defined, thus invisibly blocking other elements that maybe visible, but not click-able)
If you used Firebug, it will illustrate that pretty well by highlighting the area of the tag.
好吧，当我在 IE 中尝试此操作时，只有在删除
position:relative;和margin-top: -10px;后，链接才会变为活动状态。 Soooo，你真的需要这个职位：亲戚吗？ :)Well, when I try this in IE, the link becomes active only after I remove
position: relative;andmargin-top: -10px;. Soooo, do you really need the position: relative? :)