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