html – 如何使一个空的锚标签可以在IE7中点击?

前端之家收集整理的这篇文章主要介绍了html – 如何使一个空的锚标签可以在IE7中点击?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要在背景图像中创建一个可点击的区域,以生成JavaScript使用的事件。所以,我创建了一个锚标签,里面我插入一些相关的文本在语义无意义的标签之间,然后隐藏:
  1. <a href="#"><i>foo</i></a>

然后我给了锚标签“display:block”属性,width和height值,并将其定位在我需要它与背景图像相关的位置。在Firefox中,这个效果很好 – 我将鼠标悬停在我的光标上,如预期的那样会改变 – 我有一些可点击的东西。然而,IE7并不喜欢锚标签为“空”,因此不将其视为可点击。所以我把它添加到css中的锚标签中:

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

…似乎愚弄IE7,以假定有东西在那里。 IE7现在将该区域视为可点击,即使锚标签实际上没有背景图片。但这似乎是对我的一个黑客,我想知道是否有一个更优雅的方式来处理这个问题。任何想法将不胜感激。谢谢。

解决方法

相反,摆脱语义无意义的标签,并使用正常的CSS图像替换。
  1. <a href="#">foo</a>

然后CSS:

  1. a {
  2. width:100px;
  3. height:100px;
  4. display:block;
  5. text-indent:-9999px;
  6. background:url(/img.png) no-repeat;
  7. }

添加你需要的任何位置,它应该工作正常。

猜你在找的HTML相关文章