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。我将来必须改变它。

标题周围的黑匣子在Firefox中无法正确显示

1 个答案: