1

私はCSSを使用してsmall、要素を段落内からその段落の横に絶対に配置しています。そこに問題はありません。

次に、javascript を使用して、small要素の前にリンクされた上付き数字を挿入することを検討しています。

基本的に、これを変更します：

<p>
    <small> ... </small>
</p>

これに：

<p>
    <sup>
        <a href="#article1_note1">1</a>
    </sup>
    <small class="note" id="article1_note1"> ... </small>
</p>

これは、IE8 以前でレイアウトが壊れる場所です。(私の知る限り、IE9 でも壊れる可能性がありますが、テスト用に XP ボックスしかありません。)

a排除のプロセスは、タグが最終的な犯人であることを示唆しています。これらのブラウザは、ブロック レベルの要素として扱っているようです。スタイル ルールにa を追加しdisplay: inlineても、これは修正されないようです。

奇妙なことに、生成されたソースを取得して静的な HTML ドキュメントとして保存すると、同じブラウザーで問題なく表示されます。

私が知る限り、この問題は JS/JQuery を介したアンカー タグの動的挿入が原因です。

私が作成したjsFiddleテストページは次のとおりです。

http://jsfiddle.net/D6SMH/show/

スクリプトが削除され、HTML が後者の生成された HTML に置き換えられたバージョンを次に示します。

http://jsfiddle.net/VJT2N/show/

どちらも、Firefox、Chrome、および Safari で同じように表示されます。後者のハードコードされたバージョンのみが IE オフェンダーに正しく表示されます。

4

2 に答える 2

2

jQuery で html タグを適切に閉じる必要があります。

notes.eq(j).before('<sup><a href="#' + noteid + '">' + (j+1) + '</a></sup>');

http://jsfiddle.net/D6SMH/2/

于 2012-05-23T19:56:29.740 に答える
0

これは、CSS 宣言が vertical-align: super; であるために発生している可能性があります。このリクエストを処理するために、タグをブロック要素に変換している可能性があります。条件付きスタイルシートで別の回避策 (負のマージントップなど) を確認することをお勧めします。

于 2012-05-23T20:17:50.787 に答える