0

少し前に、2 行の見出しの周りにパディングを付けたブラック ボックスを作成する方法について質問しました。

古い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;
    }
}

これは非常にハックです。私は将来それを変えなければならないでしょう。

于 2013-07-18T12:41:16.553 に答える