div标签里面的a标签不能跳转:
昨天在写代码,发现重复的代码点击事件居然不能实现,进一步研究,发现连a标签不能跳转了。。
经过昨天一晚上和今天,终于找到了解决办法,但是没有找到原因,想不通啊。
先看大概代码吧:
<div id="eight">
<img src="{{recps.7.4}}" class="photo" width="270" height="200" style="display: inline;"/>
<dl>
<dt style="margin: 5px 50px ">
{% if flag08 == '0' %}
<i class="icon-xihuan iconfont love-black love-black-08"></i>
{% else %}
<i class="icon-xihuan-copy iconfont love-red love-red-08"></i>
{% endif %}
{{recps.7.1}}:<a href="{{recps.7.3}}" style="text-decoration:none;color:blue"><span class="eight-title">{{recps.7.2}}</span></a>
</dt>
</dl>
</div>
<div id="nine">
<img src="{{recps.8.4}}" class="photo" width="270" height="200" style="display: inline;"/>
<dl>
<dt style="margin: 5px 50px ">
{% if flag09 == '0' %}
<i class="icon-xihuan iconfont love-black love-black-09"></i>
{% else %}
<i class="icon-xihuan-copy iconfont love-red love-red-09"></i>
{% endif %}
{{recps.8.1}}:<a href="{{recps.8.3}}" style="text-decoration:none;color:blue"><span class="nine-title">{{recps.8.2}}</span></a>
</dt>
</dl>
</div>
大概代码就是这个类型
这里面的id=(one~eight)的a标签都可以跳转,点击事件也可以响应。
然而id=nine和id=ten的a标签不能跳转,点击事件也不响应。
id=eleven的a标签可以跳转,但点击事件不能响应。
id=twelve的a标签可以跳转,点击事件也可以响应。
(注意:这些的标签的点击事件也都是一个模子的。)
我反复的排查,代码都检查了好多遍,确定不会错了。看来网上的办法,大多不能解决我的问题。没办法,只能一个试了,慢慢的把怀疑的注释掉,在注释回来,看网页的变化。终于,我发现是它的css文件的原因。
#eleven
{
width:270px;
margin-top: 50px;
margin-left: 40px;
/*background: rgba(160,32,240,0.6);*/
/*height:200px;*/
float: left;
}
如上,把height给注释掉,就都正常了,但是我还是没想通原因,我也没有超出标签的框子啊…