错误：href 属性在 HTML <A> 标记中不起作用答案

【问题标题】：ERROR: href Attribute is not working in HTML <A> TAG错误：href 属性在 HTML <A> 标记中不起作用
【发布时间】：2013-11-22 12:29:45
【问题描述】：

href 属性在下面提到的代码中不起作用：

<section class="loginform" style="min-width: 600px; width: 70%; margin: 40px auto;">
<fieldset style="border-radius: 5px; padding: 5px;">
<legend>AA</legend> 
<label> <br> </label>
<style>
.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: -webkit-gradient(radial, 50% 120%, 0, 50% 120%, 100, color-stop(0%, #81e8f6), color-stop(10%, #76deef), color-stop(80%, #055194), color-stop(100%, #37526a));
  background: -webkit-radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #37526a 100%);
  background: -moz-radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #37526a 100%);
  background: -o-radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #37526a 100%);
  background: radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #37526a 100%);
  cursor:pointer;
}
.ball:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: -webkit-gradient(radial, 50% 0px, 0, 50% 0px, 58, color-stop(0%, #ffffff), color-stop(58%, rgba(255, 255, 255, 0)));
  background: -webkit-radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
  background: -moz-radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
  background: -o-radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
  background: radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
  -webkit-filter: blur(5px);
  z-index: 2;
}

.ball .shadow {
position: absolute;
width: 100%;
height: 100%;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0)));
background: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
background: -moz-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
background: -o-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
background: radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
-webkit-transform: rotateX(90deg) translateZ(-26px);
-moz-transform: rotateX(90deg) translateZ(-26px);
-ms-transform: rotateX(90deg) translateZ(-26px);
-o-transform: rotateX(90deg) translateZ(-26px);
transform: rotateX(90deg) translateZ(-26px);
z-index: -1;
}
.stage {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 10px;
  -webkit-perspective: 200px;
  -moz-perspective: 200px;
  -ms-perspective: 200px;
  -o-perspective: 200px;
  perspective: 200px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}
</style>

<ul> 
<li>
<section class="stage">
  <figure class="ball"><span class="shadow"></span><div style="line-height:45px; color:#00FFFF; text-align:center; font-size:16px;">
    1</div></figure>
</section> </li>

<li>
<section class="stage">
  <figure class="ball"><span class="shadow"></span><div style="line-height:45px; color:#FFFF00; text-align:center; font-size:16px;">
   <a href="http://www.test.com/aaa.php"> Test</a>
</div></figure>
</section> </li>
</ul>
    </fieldset> </section>
</section>

你能帮我解决这个错误吗？请注意：在这里，如果我点击测试；网页未将点击事件导航到所需目的地。

【问题讨论】：

jsfiddle.net/Spfg9 为我工作
属性不起作用是什么意思？您是否无法检索属性的值，链接未指向正确的 URL，单击时链接无法触发...？
您应该提供有关使用此 html 块的上下文的更多详细信息。
@Terry ;单击链接时，我无法导航到相应的 URL。
为什么只有li标签？在您的最终代码中是这样还是只是一部分？

标签： url href html

【解决方案1】：

由于您的:before 块而出现问题：

.ball:before {
  position: absolute;
}

定位为absolute，其位置变为链接上方，然后显然链接不起作用。

为防止您也可以将div 的链接定位为绝对链接（您还应该使用 z-index 来“播放”以使所有这些工作（或者只是在全部）。

<div style="position:absolute; z-index:3;line-height:45px; color:#FFFF00; text-align:center; font-size:16px;">
   <a href="http://www.test.com/aaa.php"> Test</a>
</div>

【讨论】：