2

これは、私がなんとか解決できたので、他の何よりも興味深い問題ですが、完全に満足できる解決策ではありません。問題をよりよく理解するために、なぜ問題が発生するのかを知りたいです。

CSS3 疑似セレクターを使用して、最初の文字にドロップ キャップを付けた段落がいくつかあります。これは、FF、Opera、および Safari では問題なく表示されますが、IE9 では表示されません。問題は、文字を配置するためのパディングとして使用している em 単位です。これらを px に変更すると、文字はすべてのブラウザで正常に表示されます。しかし、テキストに px と em を混在させることに満足していません。これは、IE9 が em 単位をレンダリングする方法と関係があると思います。

ここで jsfiddle を作成しました: http://jsfiddle.net/C5zsv/

HTML:

<section class="post-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet mi ut erat dapibus varius. Cras aliquet augue eget ipsum posuere a mattis quam gravida. Proin pretium rhoncus mi, nec dapibus odio iaculis id. Aenean mattis, nulla eu hendrerit fermentum, urna tellus tristique mauris, eu dignissim quam arcu ut nisi.</p>
</section>

CSS:

p {
    margin:0 0 1.5em 0;
    text-align:justify;
    font:1em/1.5 Georgia, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", serif;
}

.post-content p:first-child:first-letter {
    float:left;
    color:#444;
    font-size:3.3em;
    padding:0.1em 0.1em 0 0;
    line-height:0.7em;
    text-shadow:2px 2px 0 #dadada;
}

洞察をありがとう！:)

BRgds

4

1 に答える 1

2

そうです、この質問は私にとって素晴らしいブラック ボックス パズルのように感じられたので、回答を裏付ける証拠を集めようとしました。さまざまなブラウザーが と の組み合わせをまったく異なる方法でレンダリングすることが判明しましemた:first-letter。

まず、これをテストするために使用したコードを次に示します(質問のフィドルのフォーク):

<p>Yyy is a<br />tall letter<br />indeed.</p>
<p>&Ntilde;ino has a<br />tall letter<br />as well.</p>
<p>ggg has a<br />big bottom<br />ahw yeah.</p>

そしてCSS：

p {
    margin: 0 0 1.0em 0;
    font: 3em/1.5 Georgia;
    background-color: #CCE;
}
p:first-letter {
    float: left;
    font-size: 3.3em;
    padding: 0.1em 0.1em 0 0;
    line-height: 0.7em;
    background-color: #DFD;
}

新しいフィドルをチェックしてください

これがさまざまなブラウザーでどのようにレンダリングされるか:

各種ブラウザの頭文字

基本的に、この SO の質問(または少なくとも結論として、しゃれは意図されていません) に対する答えは次のように思われemますfirst-letter。そして、少年は、慈悲深いではありません。

この「慈悲」には、いくつかの興味深い機能もあります。

  • Chrome (125px) と IE (134px) は最初の文字の高さを一定に保ちますが、FF は余分な高さを与えることにしました。
  • FF はほとんどの場合、文字を実際のボックス内に保持します (Y の左上部分を除きますが、3 つのブラウザーすべてがこれを行います)。
  • Chrome と IE の両方で、Ñ と小文字の g をボックスの外に出すことができます。
  • 3 つのブラウザーのいずれも、テキストの 2 行目の下部が最初の文字の実際の下部と位置合わせされていません。
  • px でパディングを設定すると、IE の大文字の Y の状況が改善されますが、私にとっては、FF と Chrome で問題が発生し続けました。
  • font-family を変更すると、予想どおり、結果は大きく異なります。
  • 最後になりましたが、一貫して動作していないのは最初の文字だけです。これらの 3 つのブラウザーでは、通常の 3 行のテキストは非常に似ています (もしかしたら同一ですか?)。

w3.org からの情報

CSS3-linebox モジュールには、これらの問題に関連すると思われるベースラインの配置に関する情報があります。ステータスが何であるかを確認するには、少し読む必要があるかもしれません（または、ここの誰かが追加できますか？）。

于 2012-02-13T22:22:19.933 に答える