2

私は HTML5 カスタム要素を使用して、「豊富な脚注」と呼ばれるもの (基本的に小さなマウスオーバー ボックス) を作成しています。マークアップは次のようになります

<p>
  Socrates is a
  <x-info>
    <x-text>
      man
    </x-text>
    <x-planation>
      <p>What is a man? Here are some examples of men:</p>
      <ul>
        <li>Bill Clinton</li>
        <li>Aristotle</li>
      </ul>
    </x-planation>
  </x-info>, therefore Socrates is mortal
</p>

次のようなものをレンダリングする必要があります

ソクラテスは人間だから、ソクラテスは死ぬ。

manという単語にカーソルを合わせるとボックスが表示されるようにします。<x-info>インライン要素のみが含まれている場合、これは正常に機能します。ただし、上記の例では、HTML パーサーは<p>s と<ul>s が別の 内にネストされていることに腹を立て<p>、マークアップを台無しにして、より似たようにレンダリングします。

ソクラテスは男

男とは？以下は男性の例です。

  • ビル・クリントン
  • アリストテレス

、したがって、ソクラテスは死ぬ

これを回避する方法はありますか？マークアップ構造を変更することは避けたいと思いますが、これは私の制御の範囲外です (そうしないと、バックエンドで前処理する必要があります)。

4

1 に答える 1

1

HTMLパーサーは「怒る」のではなく、使用した要素にデフォルトのスタイルを適用するだけのブラウザです。

リスト (ul、ol、dl) はブロック レベルの要素であり、既定のスタイルが受け入れられます。すべてのブラウザーは、これらの要素をリストのように見せるために、これらのスタイル (パディング、マージン、箇条書き、数字など) をこれらの要素に適用します。 .

あなたの場合、順序付けられていないリスト、箇条書きのリスト項目は、すべてのブラウザの標準レンダリングです。あなたの問題は、リストをリストのように見せたくないということです。そのため、2 つのオプションがあります。

  1. リストにマークアップを使用しないでください。
  2. リストのデフォルトのスタイルを削除します。

マークアップを変更できない場合は、オプション 2 が必要になります。これは、少しの CSS で実現できます。

ul {display: inline-block; padding: 0, margin: 0; list-style: none}
ul > li {display: inline;}

もちろん、オプション 1 は次のように使用できるため、はるかに簡単です。

<p>What is a man? Here are some examples of men: Bill Clinton, Aristotle, therefore Socrates is mortal</p>

すべてのコンテンツを段落と見なすことができない明確な理由がないため、意味的には何も問題はありません。特に、それがどのように表示されるかです。

ps この特定の例では、<dfn>要素を使用して、定義を作成している単語をマークアップすることをお勧めします。ここでは、定義リスト<dl>も適切な選択です。

于 2015-06-15T15:01:48.457 に答える