如何使一个空的锚标签可点击在IE7？ [英] How to make an empty anchor tag clickable in IE7?

问题描述

我需要使背景图片中的区域可点击，以生成JavaScript使用的事件。所以，我创建了一个锚标签，并在其中插入一些相关的文本在语义上无意义的标签之间，然后隐藏：

I need to make an area within a background image clickable to generate an event for JavaScript use. So, I created an anchor tag and inside that I inserted some relevant text between semantically meaningless tags which I then made hidden:

<a href="#"><i>foo</i></a>

然后我给了锚标签display：block属性，宽度和高度值，它在哪里我需要它是相对于背景图像。在Firefox中，这很好 - 我将鼠标悬停在其上，我的光标按预期变化 - 我有一些可点击的东西。然而，IE7不喜欢锚标签是空的事实，因此不将其视为可点击的。所以我把它添加到css中的锚点标签：

Then I gave the anchor tag 'display:block' properties, width and height values, and absolutely positioned it where I needed it to be in relation to the background image. In Firefox this works nicely - I hover over and my cursor changes as expected - I've got something clickable. IE7 however, doesn't like the fact that the anchor tag is 'empty' and therefore doesn't treat it as clickable. So I added this to the anchor tag in css:

background:url(/no-image.jpg); 

...这似乎愚弄了IE7假设有东西。 IE7现在将该区域视为可点击，即使锚标记实际上不存在背景图像。但这似乎对我有点黑客，我想知道是否有一个更优雅的方式来处理这个问题。任何想法将非常感谢。感谢。

...which seems to fool IE7 into assuming something is there. IE7 now treats the area as clickable, even if no background image actually exists for the anchor tag. But this seems like a bit of a hack to me and I'm wondering if there is a more elegant way to deal with this problem. Any ideas would be greatly appreciated. Thanks.

推荐答案

取消语义上无意义的标签，并使用正常的CSS图片替换。

Get rid of the semantically meaningless tags and use normal CSS image replacement, instead.

<a href="#">foo</a>

然后CSS：

a { 
    width:100px; 
    height:100px; 
    display:block; 
    text-indent:-9999px; 
    background:url(/img.png) no-repeat;
}

添加任何你需要的定位，它应该可以正常工作。

Add whatever positioning you need, and it should work just fine.

这篇关于如何使一个空的锚标签可点击在IE7？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！