Firefox 中标题周围的黑框无法正确显示

Question

不久前，我向question 询问了如何在两行标题周围制作带有内边距的黑框。

我工作得很好，除了旧的 IE，但是：在 Firefox 中，它有时看起来很粗糙。有时，我的意思是，每隔一个标题，或者如果你上下滚动。我不知道这是否对每个 FF 用户都可见，请自行寻找：

http://fabsblog.dev.ka-mediendesign.de/

我试图将它重新创建为小提琴，但由于它取决于上下文，我将不得不重新创建大部分博客。这是 CSS（有一些浏览器黑客，因为不是每个浏览器都显示相同。）：

#page .headline-black {
border:none;
/* 2x "Padding" left */
border-left: 50px solid #000;
}

#page .headline-black h1 {
display: inline;
background-color: #000;
padding: 8px 0 9px 0;
padding: 8px 0 8px 0\9;
font-size: 22px;
line-height:44px;
}

@-moz-document url-prefix() {
#page .headline-black h1 {
    padding: 8px 0 7px 0;
}
}

#page .headline-black h1 .indent { 
position: relative; 
/* "Padding" left */
left: -25px;
}

#page .headline-black h1 .heading,
#page .headline-black h1 .heading a {
color: #fff; 
background: #000;
}

Answer 1

我不知道为什么或如何，但解决方案是提供半像素填充，以便 Firefox 可以按照它想要的方式对其进行舍入。

@-moz-document url-prefix() {
    #page .headline-black h1 {
        padding: 7.5px 0 7.5px 0;
    }
}

这非常hacky。我将来必须改变它。