2

テキストに「続く」半透明の背景を取得しようとしています。つまり、背景は長方形のボックスではなく、改行ごとに停止する「ギザギザのボックス」にする必要があります。

このような：

テキストの背景はギザギザのボーです

私は次のスタイルでこれを行います：

p {
  display: inline;
  background-color: rgba(0, 0, 0, 0.5); 

  font-family: "Montserrat";
  font-size: 18px;
  /* Add spacing between lines */
  line-height: 28px;
  /* Make sure background covers space between lines */
  padding-bottom: 6px;
}

ここで例を見ることができます: http://jsbin.com/texala/6

問題は、Firefox と Chrome でこれらのレンダリングが異なることです。2 つのブラウザーはまったく同じ.woffフォント ( ではありません) を使用しており、 cssreset.com.woff2からすべての異なるリセットを試みてもまだ機能しません。

問題

ここでわかるのは、各行の背景が Firefox では重なっていますが、Chrome では重なっていないことです。

Chrome の行の高さ + パディング レンダリング Firefox の行の高さ + パディング レンダリング

OS X 10.7.5 と Firefox 35.0.1 および Chrome 40.0.22.14.111 を使用しています

フォントのレンダリングはプラットフォームごと、ブラウザーごとに異なることは知っていますが、ラインの高さとフォント サイズ (およびパディング) をピクセル単位で明示的に設定すると、これら 2 つのレンダリングのどちらかが間違っているのではないでしょうか?

さらに、Chrome と Firefox の両方で重複することなく背景が行間のすべてのスペースを覆うように、この問題の解決策を誰かが持っていますか?

4

2 に答える 2

1

多分他の行の高さで?:

p {line-height: 158%;}
于 2015-02-06T21:28:28.613 に答える
-2

ドキュメント構造全体の中で CSS リセットを配置することが重要です。ただし、これについては具体的には、

p{display:inherit;text-align:justify};

編集

EM と REM の使い方を読んでください。あらゆる点でピクセルよりも優れています。

p{行の高さ:1.61em};

于 2015-02-06T21:21:21.390 に答える