为什么活动元素在firefox中有工件？

Question

我使用表创建了一个导航栏，但是在firefox中，active / focused元素看起来有点类似于在它上面显示的back-tics（```）（我认为它们实际上是渲染效果不佳的轮廓）：

为什么他们在那里，我怎么能摆脱他们？

JSFiddle

Answer 1

这是Firefox中的渲染问题：#434301。

David Baron在Firefox中的评论Bugzilla澄清了它看起来如此的原因：

  

CSS说的是包含块的内联被分成了一个   块之前的块和块之后的块;你看到了   块之前的块得到它周围的轮廓。那种行为   可能不太理想......

您可以通过避免在display:block内直接使用display:inline元素来避免此问题。

以前的答案：

在我的机器中复制错误的最小测试用例：http://jsfiddle.net/P2BEV/2/

请注意，<a>是内联元素，而<div>是块元素，内联元素不能包含有效HTML的块元素。如果移除了<div>或者使用CSS将其转换为display: inline，则人工制品本身就会消失，并且如果<span>已转为display: block，它将会显示。如果您将添加display: block变为<a>，那么人工制品也会消失。

尝试多一点，似乎每当Firefox为包含display:inline元素的display:block元素绘制轮廓时，这都是一个问题。

Answer 2

尝试在运行linux和firefox的另一台计算机上复制此问题。如果不成功，那么您的操作系统，浏览器或图形设置就会出现问题。