chrome和Firefox中，a标签无法点击的原因
时间：2010-08-20 来源：程文
最近在写一个视频列表页面，当写好之后却发现某些a标签在chrome和Firefox中无法点击，这让我很是费解
这是页面代码
页面代码
<div id="main_result">
页面代码
<div class="inner">
<div id="search_container">
<div id="search-bar">
<div class="input text">
<input onblur="if(this.value=='') this.value='搜索'" id="SearchField" onfocus="if(this.value=='搜索') this.value=''"
value="搜索" onkeyup="ListPageSearch(event)" />
</div>
</div>
<div id="results-container-std" class="clearfix">
<ul class="child-lists">
<%if (Model.Count() != 0)
{
foreach (var item in Model)
{ %>
<li class="clearfix">
<div class="description-thumb">
<a class="thumb" href="<%: Url.Action("../Video/VideoPlay", new { id = item.Id }) %>">
<img class="thumb-144" alt="<%: item.Title %>" src="<%: ConfigurationHelper.GetAppSetting("mediaSourcePath") + item.MediaPath + item.ThumbSource %>"
width="144" height="80" /></a>
</div>
<div class="description">
<h4>
<a href="<%: Url.Action("../Video/VideoPlay", new { id = item.Id }) %>">
<%: item.Title%></a>
</h4>
<span class="org"><a>
<%:item.School%></a> / <a><%:item.Classify1 %></a></span><br />
<span class="author"><a>
<%:item.Author%></a> </span>
</div>
<p class="description">
<%:item.Description%>
</p>
</li>
<%}
}
else
{%>
对不起，没有相应的视频
<% }%>
</ul>
</div>
</div>
<img class="cap" border="0" alt="" src="http://www.cnblogs.com/Content/Images/video/bg_search_bottom.gif"
width="976" height="6" />
</div>
</div>
这是样式代码
样式代码
h1{
margin: 0;
padding: 0;
}
h3
{
margin: 0;
padding: 0;
}
h4
{
margin: 0;
padding: 0;
}
h5
{
margin: 0;
padding: 0;
}
p
{
margin: 0;
padding: 0;
}
li
{
margin: 0;
padding: 0;
}
ul
{
margin: 0;
padding: 0;
}
ul
{
margin: 0;
padding: 0;
}
img
{
border:none;
}
:link img
{
border-bottom: medium none;
border-left: medium none;
border-top: medium none;
border-right: medium none;
}
li a.thumb
{
position: relative;
margin: 0px 0px 4px;
width: 144px;
display: block;
80px;
overflow: hidden;
}
li a.thumb img.play-icon
{
position: absolute;
margin-top: -10px;
display: none;
margin-left: -10px;
top: 50%;
left: 50%;
}
li a.smaller.thumb
{
width: 104px;
58px;
}
.thumb-144
{
width: 144px;
}
li a.thumb img.play-icon
{
position: absolute;
margin-top: -10px;
display: none;
margin-left: -10px;
top: 50%;
left: 50%;
} #main_result
{ float: left;
padding-bottom: 30px;
padding-left: 0px;
width: 100%;
padding-right: 0px;
background: #FFFFFF;
padding-top: 10px;
}
li a.thumb
{
position: relative;
margin: 0px 0px 4px;
width: 144px;
display: block;
80px;
overflow: hidden;
}
li a.thumb img.play-icon
{
position: absolute;
margin-top: -10px;
display: none;
margin-left: -10px;
top: 50%;
left: 50%;
}
.description-thumb
{
position: absolute;
margin: 0px;
overflow: hidden;
top: 0px;
left: 0px;
}
.banner-description
{
position: absolute;
top: 0px;
left: 98px;
}
ul.child-lists
{
margin: 1em 0px;
clear: left;
}
ul.child-lists li
{
position: relative;
padding-bottom: 20px;
min-100px;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
padding-top: 0px;
}
ul.child-lists li .description-thumb
{
position: static;
margin: 0px;
display: inline;
float: left;
}
ul.child-lists li div.description
{
padding-bottom: 0px;
padding-left: 160px;
padding-right: 0px;
clear: none;
padding-top: 0px;
}
ul.child-lists li p.description
{
padding-bottom: 0px;
margin: 0px;
padding-left: 0px;
width: 500px;
padding-right: 0px;
display: inline;
float: left;
padding-top: 0px;
}
.child-lists li a
{
color: #737373;
}
.child-lists li h4
{
margin-top: 0px;
width: auto;
padding-top: 0px;
}
#search_container .child-lists li div.description-thumb
{
position: static;
}
#search_container .child-lists li h4
{
width: 210px;
}
#search_container .child-lists li div.description
{
padding-bottom: 0px;
padding-left: 10px;
padding-right: 0px;
display: inline;
float: left;
padding-top: 0px;
}
#search_container ul.child-lists li p.description
{
margin: 0px 0px 0px 10px;
}
.child-lists li h4 a
{
margin-top: 0px;
color: #333;
padding-top: 0px;
}
.child-lists li .video-grade
{
margin: 1em 0px;
}
.org
{
color: #555;
font-size: 11px;
}
.author
{
font-size: 12px;
}
.clearfix:after
{
display: block;
0px;
visibility: hidden;
clear: both;
content: ".";
}
.clearfix
{
display: inline-block;
}
.clearfix
{
display: block;
}
input
{
outline-style: none !important;
outline-color: invert !important;
outline-width: medium !important;
}
#results-container
{
padding-top: 40px;
}
#results-container-std
{
position: relative;
padding-bottom: 35px;
padding-left: 35px;
padding-right: 35px;
padding-top: 15px;
}
#results-container-std p
{
margin: 0px 0px 10px;
font-size: 12px;
}
#results-container-std p a
{
font-weight: bold;
}
#results-container-std p span.adtl-tools
{
margin: 0px 0px 0px 15px;
}
#results-container-std ul.child-lists
{
margin: 3em 0px 1em;
}
div#search_container
{
margin-top:30px;
border-bottom: medium none;
position: relative;
border-left: #ccc 1px solid;
width: 974px;
clear: both;
border-top: medium none;
border-right: #ccc 1px solid;
}
img.cap
{
float: left;
}
#search-bar
{
position: relative;
background: url(http://www.cnblogs.com/Content/Images/video/bg_search.gif) #6f6f6f repeat-x left bottom;
81px;
}
#search-bar input
{
border-bottom: 0px;
position: absolute;
border-left: 0px;
padding-bottom: 0px;
padding-left: 26px;
width: 570px;
padding-right: 10px;
font-family: 微软雅黑, 黑体;
background: url(http://www.cnblogs.com/Content/Images/video/bg_search_input.gif) no-repeat left top;
23px;
color: #999999;
font-size: 14px;
border-top: 0px;
top: 28px;
border-right: 0px;
padding-top: 2px;
left: 20px;
}
于是我将那一部分的每个div都拆下来，看看是否有问题之后，再装上去，最后终于找到了问题
就是出在main_result这个div上面
我尝试着修改了它的样式，发现当我讲float这个属性去掉之后，a标签便可以点击了，然后再将样式做了小小的调整之后，就和原来一模一样了。
我觉得估计是浮动之后，有div覆盖在了整个页面上，导致了a标签的失效。
相关阅读 更多 +
