0

前段时间我问了一个问题，关于如何在两行标题周围制作一个带有填充的黑框。

我工作得很好，除了旧的 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;
}
4

1 回答 1

0

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

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

这是非常hacky。将来我将不得不改变这一点。

于 2013-07-18T12:41:16.553 回答