74

http://webdesign.about.com/od/htmltags/p/aadivtag.htmから

HTML 4 では、DIV 要素を P 要素のような別のブロック レベル要素内に配置することはできません。ただし、HTML5 では、DIV 要素は内部で見つけることができ、P や DIV などの他のフロー コンテンツ要素を含めることができます。

フォーム内にこのようなものがあります

<p> <label...> <input...> </p>

しかし、Rails が入力をラップする error_explanation div を自動生成すると、1 つの段落が 2 つの段落に変わり、Firebug で次のように表示されます。

<p> <label...> </p> <div...> <input...> </div> <p> </p>

また、単純なものを追加すると

<p> <div> test </div> </p>

同じ問題が発生し ( JSFiddle )、DOM で次のようにレンダリングされます。

<p> </p> <div> test </div> <p> </p>

なんで？

更新:記事の著者に電子メールを送信したところ、適切な変更が加えられました。

4

4 に答える 4

131

細かい仕様から：

p – 段落

[...]

許可される内容

フレージングコンテンツ

そして、このフレージングコンテンツは何ですか？フレージング内容:

通常の文字データと混合されたフレージング要素で構成されます。

通常の文字データとは、マークアップされていないテキストです。フレージング要素は次のとおりです。

aまたはemまたはstrong ... [ divではない他の要素の束]

したがって、<p><div></div></p>有効な HTML ではありません。仕様に記載されているタグ省略規則に従って、タグはタグ<p>によって自動的に閉じられ、一致する. ブラウザは、次の後に開始タグを追加して修正を試みる権利を十分に有しています。<div></p><p><p><div>

<p></p><div></div><p></p>

<div>a を a の中に入れて<p>、さまざまなブラウザーから一貫した結果を得ることはできません。ブラウザに有効な HTML を提供すると、ブラウザの動作が改善されます。

<div>ただし、内部に配置できる<div>ため、を置き換えて適切にスタイルを設定する<p>と<div class="p">、必要なものを取得できます。

about.com での参照は w3.org での仕様と一致しません。参照は誤解を招きます。

于 2012-05-26T05:51:14.573 に答える
21

これはかなり古い質問ですが、Google でこのページに出くわす可能性のある他の人を助けるために、問題に対する私の解決策を共有したいと思いました。

前述のとおり、ブロック要素を p-tag 内に配置することは許可されていません。ただし、実際には、これは実際には完全に真実ではありません。実際の表示値は実際にはまったく関係ありません。考慮される唯一のことは、タグのデフォルトの表示値です。たとえば、div の場合は「block」、span の場合は「inline」です。表示値を変更しても、ブラウザは p-tag を途中で閉じます。

ただし、これは逆にも機能します。span-tag のスタイルを設定して div-tag とまったく同じように動作させることができますが、p 環境内では引き続き受け入れられます。

したがって、これを行う代わりに：

<p>
   <div>test</div>
</p>

あなたはこれを行うことができます：

<p>
   <span style="display:block">test</span>
</p>

ブラウザは p 環境のコンテンツを再帰的に検証することを覚えておいてください。

<p>
   <span style="display:block">
       <div>test</div>
   </span>
</p>

次の結果になります。

<p>
   <span style="display:block"></span>
</p>
<div>test</div>
<p>
</p>

うまくいけば、これは誰かを助けるでしょう:)

于 2013-10-18T10:15:40.833 に答える
9

webdesign.about.com ページは単純に間違っています。彼らはおそらく HTML5 ドラフトを誤解していたのでしょう。P 内で DIV を許可すると、大きな混乱が生じます。HTML5 の開発中に、これまで考慮されたことさえなかったと思います。

P 内で DIV を使用しようとすると、DIV 開始タグによって暗黙的に P 要素が閉じられます。これはおそらくあなたが見たものを説明しています。

この問題を回避するには、コンテンツに DIV 要素が含まれる、または含まれる可能性がある場合は P を使用しないでください。代わりに DIV を使用してください。

于 2012-05-26T06:54:44.830 に答える
1

要素は開始タグによって自動的に閉じられるため、DOM<div>の a 内に要素を配置することはできません。<p><div><p>

<P>その中に他の要素を許可しません。only <span>and <strong>element allowed.In では<p></p>、テキスト関連のタグのみを追加できます。 詳細については、このリンクを参照してください

于 2017-05-29T08:38:29.980 に答える