Firefox中微小的可点击区域

Question

在Firefox中，页脚中链接的可点击区域为TINY。可点击区域不会跨越整个标签 - 无论是宽度还是高度。在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;
}

我甚至尝试使用类来应用块样式，但它仍然没有帮助：

<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检查器的屏幕截图：