CSS peut-il transformer un élément de bloc à l'intérieur d'un élément en ligne en une structure HTML valide ?

Pouvez-vous modifier un élément de bloc en ligne avec CSS s'il contient un élément de bloc ?

Malgré l'idée selon laquelle placer un élément de bloc à l'intérieur un élément en ligne est inapproprié, il devient curieux de savoir ce qui se passe lorsque CSS est appliqué pour transformer un élément en ligne en un élément de bloc, qui à son tour contient un autre bloc

Marquage HTML :

<div><p>This is a paragraph</p></div>

CSS appliqué :

div {
  display: inline;
}

Dans ce scénario, l'élément en ligne L'élément (DIV) contient un élément de bloc (P). La question se pose : cela crée-t-il un problème de validité HTML ?

Validité HTML et application CSS

Les avis diffèrent sur la façon dont la validité HTML est déterminée. Certains soutiennent que la validité doit être jugée avant l'application des règles CSS, tandis que d'autres suggèrent une vérification post-CSS.

La spécification CSS 2.1

La spécification CSS 2.1 répond à cette situation. , indiquant que lorsqu'une boîte en ligne contient une boîte au niveau du bloc de flux entrant, la boîte en ligne se divise en deux, une de chaque côté de la boîte au niveau du bloc. De plus, des boîtes de bloc anonymes sont créées pour enfermer les boîtes en ligne brisées et la boîte au niveau du bloc.

Implémentation et cohérence

Bien que la spécification CSS décrit clairement le comportement, sa mise en œuvre cohérente dans tous les navigateurs est incertaine. Certains navigateurs peuvent implémenter un modèle alternatif, en enveloppant les blocs imbriqués dans des « zones de ligne anonymes » et en dessinant des bordures en ligne autour d'eux.

Conclusion

La question de validité dans ce contexte reste ouvert à l'interprétation. Bien que les règles CSS spécifient le comportement des éléments en ligne contenant des éléments de bloc, la mise en œuvre et la cohérence de cette règle dans tous les navigateurs ne sont pas absolues. Il est conseillé aux concepteurs de faire preuve de prudence lorsqu'ils utilisent un tel style CSS afin de garantir les résultats souhaités sur plusieurs navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!