css - Firefox 中的微小可点击区域

Question

在 Firefox 中，我的页脚中链接的可点击区域很小。可点击区域不会跨越整个标签 - 无论是宽度还是高度。在 IE 中，没问题。有什么想法吗？

这是我的页脚代码:

<div id="footer">
<ul>
<li>RKM Research and Communications, Inc.&nbsp;&nbsp;|</li>
<li>1039 Islington St&nbsp;&nbsp;|</li>
<li>Portsmouth, NH  03801&nbsp;&nbsp;|</li>
<li>603.433.3982&nbsp;&nbsp;|</li>
<li><a href="mailto:info@rkm-research.com">email us</a></li>
</ul>
<ul class="copyright">
<li>&copy; 2012 RKM Research and Communications, Inc.   </li>
<li><a href="privacy.html">Privacy policy</a> </li>
<li><a href="terms.html">Terms of use</a></li>
</ul>

和我的 CSS:

div#footer ul li{
color : #036;
background-color : transparent;
display: inline
}

div#footer ul li a{
color : #115EAC;
text-decoration : none;
display:inline-block;
paddding:10px 20px;
}

.footer ul li a:hover{color:#F6901E;
text-decoration : underline;
}

我什至尝试使用类来应用 block 样式，但它仍然没有帮助:

<li class="flink"><a href="mailto:info@rkm-research.com">email us</a></li>
</ul>

CSS:

.flink ul li a{
color : #115EAC;
text-decoration : none;
display:block;
paddding:10px 20px;
float:left;
}

Answer 1

小世界，我也住在朴茨茅斯。

使用您提供的代码，可点击区域就如其所愿。您可以在此处验证:http://jsfiddle.net/cCDaL/1/

我把每个a元素的背景都变成了黄色，这样你就可以清楚地看到可点击区域是什么，而且确实是它应该的样子。

我认为您的问题的答案是您有另一个 CSS 规则使可点击区域变小，可能是 line-height 或 padding(填充不可点击在链接中)。您可以使用 Chrome 或 Firefox 检查器查看此处可能出现的问题。

另一个编辑: 在 Firefox Aurora 14.0a2 中，可点击区域确实也很正常，对我来说，在您的网站上 http://www.rkm-research.com/ .这是 Firefox 检查器的屏幕截图: