ブロック要素に別のブロック要素が含まれている場合、そのブロック要素を CSS のインラインに変更するのは間違っていますか?
https://stackoverflow.com/questions/746531
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
inline 要素の中に block 要素を置くのが間違いであることはわかっていますが、次の場合はどうでしょうか。
次の有効なマークアップを想像してください。
<div><p>This is a paragraph</p></div>
次に、次の CSS を追加します。
div {
display:inline;
}
これにより、インライン要素にブロック要素が含まれる状況が作成されます (デフォルトでは、div はインラインになり、p はブロックになります)。
ページ要素はまだ有効ですか?
CSS ルールの適用前または適用後、HTML が有効かどうかをいつどのように判断するのでしょうか?
アップデート： それ以来、HTML5 ではブロック レベルの要素をリンク タグ内に置くことが完全に有効であることを学びました。例:
<a href="#">
<h1>Heading</h1>
<p>Paragraph.</p>
</a>
これは、HTML の大きなブロックをリンクにしたい場合に実際に非常に便利です。
解決
から CSS 2.1仕様:
インライン ボックスにインフロー ブロック レベル ボックスが含まれる場合、インライン ボックス (および同じライン ボックス内のそのインライン祖先) は、ブロック レベル ボックス (および連続するブロック レベルの兄弟またはブロック レベルの兄弟のみで区切られる) の周囲で分割されます。折りたたみ可能な空白やアウトオブフロー要素など)、インライン ボックスを 2 つのボックス (どちらかの側が空の場合でも) に分割し、ブロック レベルのボックスの両側に 1 つずつ配置します。ブレーク前とブレーク後の行ボックスは匿名ブロック ボックスで囲まれ、ブロック レベル ボックスはそれらの匿名ボックスの兄弟になります。このようなインライン ボックスが相対位置の影響を受ける場合、結果として生じる変換は、インライン ボックスに含まれるブロック レベルのボックスにも影響します。
このモデルは、次のルールが適用される場合、次の例に適用されます。
p { display: inline } span { display: block }この HTML ドキュメントで使用されました:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HEAD> <TITLE>Anonymous text interrupted by a block</TITLE> </HEAD> <BODY> <P> This is anonymous text before the SPAN. <SPAN>This is the content of SPAN.</SPAN> This is anonymous text after the SPAN. </P> </BODY>P 要素には、匿名テキストのチャンク (C1) が含まれており、その後にブロック レベルの要素が続き、その後に匿名テキストの別のチャンク (C2) が続きます。結果として得られるボックスは、BODY を表すブロック ボックスとなり、C1 の周囲に匿名ブロック ボックス、SPAN ブロック ボックス、および C2 の周囲に別の匿名ブロック ボックスが含まれます。
匿名ボックスのプロパティは、それを囲んでいる非匿名ボックスから継承されます (たとえば、サブセクション見出し「匿名ブロック ボックス」のすぐ下の例では、DIV のもの)。継承されていないプロパティには初期値があります。たとえば、匿名ボックスのフォントは DIV から継承されますが、余白は 0 になります。
匿名のブロック ボックスを生成する要素に設定されたプロパティは、その要素のボックスとコンテンツに引き続き適用されます。たとえば、上記の例で P 要素に境界線が設定されている場合、境界線は C1 (線の終端で開いている) と C2 (線の始点で開いている) の周囲に描画されます。
一部のユーザーエージェントは、他の方法でブロックを含むインラインに境界線を実装しています。たとえば、そのような入れ子になったブロックを「匿名行ボックス」内にラップし、そのようなボックスの周囲にインライン境界線を描画します。CSS1 および CSS2 はこの動作を定義していないため、CSS1 のみおよび CSS2 のみのユーザー エージェントはこの代替モデルを実装しても、CSS 2.1 のこの部分への準拠を主張する可能性があります。これは、この仕様がリリースされた後に開発された UA には適用されません。
それはあなたが望むようにしてください。この動作が CSS で指定されていることは明らかですが、それがすべてのケースをカバーしているのか、それとも今日のブラウザ全体で一貫して実装されているのかは不明です。
他のヒント
有効かどうかは別として、要素の構造が間違っています。ブロック要素をインライン要素内に配置しない理由は、ブラウザーが予測しやすい方法で要素をレンダリングできるようにするためです。
HTML または CSS のルールに違反しない場合でも、意図したとおりにレンダリングできない要素が作成されます。ブラウザは、HTML コードが無効であるかのように要素を処理する必要があります。
HTML と CSS は両方とも引き続き有効です。理想的には、このようなことを行う必要はありませんが、CSS の特定の部分は、条件付きスタイルシートや無効化するハックに頼ることなく、Internet Explorer の二重マージンのバグを取得するための便利な (構文的には有効ですが、意味的には有効ではない) 方法です。あなたのCSS。(X)HTML は CSS よりも意味論的な価値があるため、CSS が意味論的に有効であることはそれほど重要ではありません。私の考えでは、コードを無効にすることなく迷惑なブラウザの問題を解決できるので、これは許容範囲内です。
HTML は CSS とは独立して検証されるため、ページは依然として有効です。CSS 仕様にもそれについては何も記載されていないと確信していますが、それについては引用しないでください。ただし、このような手法を使用する場合は細心の注意を払います。一部のブラウザでは意図したとおりに表示される可能性がありますが、すべてをテストする必要があるためです。多くの保証が行われているとは思えません。
ページ要素はまだ有効ですか?
HTML の意味では「有効」です。HTML は CSS について何も知りません。
ただし、ブラウザで得られるレンダリングは CSS 仕様によって「定義されていない」ため、まったく同じように見える可能性があります。特定のブラウザを対象とした CSS ハックにそのようなルールを含めることはできますが (そのブラウザがこのケースをどのようにレンダリングするかがわかっている場合)、一般のブラウザに提供すべきではありません。
これが何らかのルールを検証するかどうかは頭ではわかりませんが、使用することをお勧めします W3C HTML バリデーター そしてその W3C CSS バリデーター それを判断するために。これがお役に立てば幸いです!
いいえ、それは間違った選択ではありません。要件に応じて使用できます。
従うロジックがあり、それをこのように実装することになったとしても、それは間違いではありません。機能しているものは、奇妙であるという理由だけで「間違っている」わけではありません。はい、それはかなり珍しいことですが、それは役に立ちますし、間違いではありません。それは意図的です。HTML と CSS は役に立つものであり、その逆ではありません。醜いからといってやめてくださいというコメントには決して耳を傾けないでください。
解決策を「無効」と呼んで、回避策を提案するのが一般的です。時には自分のやったことを振り返ることもできます。しかし、あなたの行動にはさまざまな理由が考えられますが、彼らはそれらを考慮しません。
私はインライン内のブロックを定期的に使用します。 これは有効であり、機能していますが、ほとんどの場合は必要ありません。だから何。XHTML がプロパティの前後に常に引用符を付けるように指示したことを思い出してください (そうしないとみんなに怒鳴られました!) が、HTML5 では内部にスペースがない場合は引用符を省略できるようになりました。単数タグの後の最後のスラッシュはどうなったのでしょうか?「<br /> 」？来て。基準が変わります。しかし、ブラウザは標準以外のものもサポートし続けています。CENTER は廃止されました。今は 2013 年ですが、まだ機能しています。TABLE 垂直方向のセンタリング用?それが唯一の方法である場合もあります。計画どおりにホバリングするには、A の中に DIV を入れますか?どうぞ。
重要なことに集中してください。
(x)html は有効、css は有効だと思います。結果は有効ですか?はい、ブラウザで希望どおりに表示されていれば可能です。
