2

などのインライン要素内にブロック レベル要素をp 直接b入れ子にすることは無効です。

display: inline-blockただし、またはisなどの css を使用position: absoluteすると、インライン コンテキスト内にブロック レベルのコンテンツを含めることが概念的に適切な場合があります。

ブラウザーはインライン要素でこのようなブロック レベルの要素を広く受け入れますが、状況によっては、無効な構造が実際の問題を引き起こすことがあります。

<p><span><p></p></span></p>

上記の例は、ネストされた 3 つの要素として解析されません。CSS に関係なく、代わりに最も内側<p>が外側を暗黙的に閉じます。その jsbin デモ<p>を見ることができます。

ブロックレベル要素をインライン要素に有効に配置するために中間要素を使用する方法はありますか?

それが不可能な場合、ほとんどの場合 (できればトリッキーな<p>タグについても) 無効だが機能する回避策はありますか?

明確にするために、私はドキュメント構造への侵襲的な変更を必要としない一般的なソリューションを探しています (つまり、「spanどこでも、すべてに使用する」ことは魅力的なソリューションではありません)。未知の (動的に生成された) ドキュメント フラグメントを潜在的にブロック レベルのコンテンツに埋め込みたい - ブロック レベルの要素を除外するようにフラグメントを修正することは実行不可能です。

関連：（主に直接ネストの有効性に対処する）

4

2 に答える 2

1

W3C バリデーター (XHTML モード) は、次の要素を a<span>と a の間で有効なものとしてリストし<p>ます。

  • 物体
  • イン
  • デル
  • 地図
  • ボタン

これらをインラインからブロックへのスパナとして使用するページは、XHTML Strict では検証しますが、HTML 5 では検証しませんobject。

HTML 5 はインラインとブロックの区別を捨てて、より複雑なシステムを採用したようです。このシステムには、要素のいくつかの異なるカテゴリがあり、要素が持つことができる子は、その祖先が何であるかによって異なります。これらの要素のうちins、delとmapは、親要素が受け入れるのと同じ種類の子を受け入れるようになり、button"フレージング コンテンツ" (インライン要素に最も近いもの) のみを受け入れます。のエラーメッセージはobjectあまり意味がありませんが、収集できる限り、親要素の制限を継承しながら、独自の制限を課しています。

私が知る限り、コンテンツのフレージングから逃れる方法はありません (iframe と新しいドキュメントを除いて)。したがって、この質問に対する答えはノーです。HTML5 では実行できません (この書き込みの）。

于 2013-04-19T19:37:27.247 に答える
0

意味的に間違っており、HTML5 では < a > タグ内のブロック要素のみが許可されていると思います (私の知る限り)。

言い換えれば、css を変更することで html コードを思い通りに動作させることができますが、それはあなたの html コードが正しいという意味ではありません。また、発生する SEO とアクセシビリティの問題も考慮する必要があります。

于 2013-01-18T12:12:19.010 に答える