5

コードもここにあります：http：//jsfiddle.net/wMfMT/5/

この単純なHTMLブロック：

<div>
    <em><em><em><em><a href="#">fifth</a></em></em></em></em>
    <em><em><em><a href="#">fourth</a></em></em></em>
    <em><em><a href="#">third</a></em></em>
    <em><a href="#">second</a></em>
    <a href="#">first</a>
</div>

そしてこのcss：

em {font-size:1.2em}

Firefoxでは正しくレンダリングされますが（単語ごとにサイズが異なります）、Chromeでは正しくレンダリングされません（5番目と4番目は同じサイズです）。最初はcssの問題だと思いましたが、htmlを調べたところ、Chromeで次のようにレンダリングされたことがわかりました。

<div>
    <em>
        <em>
            <em>
                <em>
                    <a href="#">fifth</a>
                </em>
            </em>
        </em>
<!-- /em missing -->
        <em>
            <em>
                <em>
                    <a href="#">fourth</a>
                </em>
            </em>
        </em>
        <em>
            <em>
                <a href="#">third</a>
            </em>
        </em>
        <em>
            <a href="#">second</a>
        </em>
        <a href="#">first</a>
    </em><!-- this is the lost /em -->
</div>

私の質問は次のとおりです。

  1. 私のhtmlは正しいですか（em-sをネストする標準に従って大丈夫ですか？）
  2. はいの場合、回避策はありますか？*
  3. これは既知のバグですか？そうでない場合はどこに報告すればよいですか？

*）私はこのコードをWordPressプラグインに入れており、多くの人が独自のcssを追加してカスタマイズしているため、emからspanなどに変更するとサイトにブレーキがかかります。cssを変更せずに回避策を探しています

http://code.google.com/p/chromium/issues/detail?id=126096にバグレポートを追加しました

4

1 に答える 1

1

あなたの HTML は正しいようで、Chrome Canary ビルドで再現できます。

回避策は、スパンを使用することです: http://jsfiddle.net/PeeHaa/tCPd8/

これが既知の問題かどうかはわかりませんが、http: //code.google.com/p/chromium/issues/list でバグリストを確認できます。

Safari も実行している場合は、そのブラウザーをテストして、それが Webkit なのか Chrome のバグなのかを確認することもできます。

アップデート

*) このコードは WordPress プラグインにあり、多くの人が独自の css を追加してカスタマイズしているため、em から span などに変更すると、サイトが壊れてしまいます。CSSを変更する必要のない回避策を探しています

ブラウザが単に間違ってレンダリングするため、使用できない可能性はありません。私が目にする唯一のハックは、javascript を使用して、最高レベルemを同じスタイルが添付されたスパンに置き換えることです。

更新2

James Allardiceが指摘しているように、プラグインで問題がなければ問題を修正するためにスパンでラップすることができます。

于 2012-05-03T12:26:40.403 に答える