Question

这个问题困扰着我很长时间，我试图找到解决方案，但我可以得到它。

我在div标签上有background image，在该图像上我有部分文字，我想选择它作为链接。

所以我这样尝试#signUp是一个位于div #main_text中的元素：

#signUp {
   display:block;
   width:137px;
   height:100px;
   position:absolute;
   left:31px;
   top:289px;
}

#main_text {
  width: 840px;
  height: 335px;
  background-color: white;
  margin: auto;
  position: relative;
}

问题是这个代码在除IE之外的所有浏览器中都能正常工作，在IE signUP上无法点击，任何解决方案，谢谢。

这是html部分：

<div id="main_text">
<?php if (function_exists("easing_slider")){ easing_slider(); }; ?><a href = "#" id="signUp" class="eModal eModal-1"></a>     
</div>

Answer 1

这应该适用于IE6，IE7和更新版本。 http://jsfiddle.net/uPeWh/ 我认为问题是容器的z-index。

#signUp {
    z-index: 20;
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50px;
    top: 50px;
    background-color: red;
    font: 1em Arial;
    color: white;
}

#main_text {
    z-index: 10;
    width: 300px;
    height: 200px;
    margin: 0;
    padding: 0;
    position: relative;
    background-color: grey;
} 

<div id="main_text">
    <a href = "#" id="signUp" class="eModal eModal-1">Click me</a>     
</div>

Answer 2

参见下面提到的代码，它在IE上工作也是IE8 +

<强> HTML

<div id="main_text">
    <a href = "#" target="_blank" id="signUp" class="eModal eModal-1">Sign Up</a>
</div>

<强> CSS

#signUp {
   display:inline-block;
   width:137px;
   height:100px;
   position:absolute;
   left:31px;
   top:289px;
   background:red;
   color:black;
   text-align:center;

}

#main_text {
  width: 840px;
  height: 335px;
  background-color: green;
  margin: auto;
  position: relative;
}

<强> DEMO

bg-image上的可点击链接

2 个答案: