Ajouter à l’intérieur de ajoute un supplémentaire

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

En HTML 4, l’élément DIV ne peut pas être à l’intérieur d’un autre élément de niveau bloc, comme un élément P. Cependant, en HTML5, l’élément DIV peut être trouvé à l’intérieur et peut contenir d’autres éléments de contenu de stream, tels que P et DIV.

J’ai quelque chose comme ça dans un formulaire

mais lorsque Rails génère automatiquement une erreur_explanation divant l’entrée, le paragraphe se transforme en deux, et je le vois dans Firebug:

 

Aussi, si je viens d’append un simple

 

test

le même problème se produit ( JSFiddle ) et il est rendu dans le DOM comme

 

test

Pourquoi?

Mise à jour: J’ai envoyé un courriel à l’auteur de l’article et elle a apporté les modifications appropriées.

De la spécification fine :

p – paragraphe

[…]

Contenu autorisé

Contenu de la phrase

Et quel est ce contenu de Phrasing ? Contenu de la phrase :

Se compose d’ éléments de phrasé mélangés à des données de caractère normales .

Les données de caractère normales ne sont que cela: texte non marqué. Les éléments de frappe sont:

a ou em ou strong … [un tas d’autres éléments dont aucun n’est div ]

Donc,

n’est pas du HTML valide. Selon les règles d’omission de balises répertoriées dans la spécification, la

est automatiquement fermée par la

, ce qui laisse la

sans correspondance

. Le navigateur est bien dans ses droits pour tenter de le corriger en ajoutant une

ouverte après le

:

 

Vous ne pouvez pas mettre un

dans un

et obtenir des résultats cohérents à partir de différents navigateurs. Fournissez aux navigateurs un code HTML valide et ils se comporteront mieux.

Vous pouvez mettre

dans un

donc si vous remplacez votre

par

et le stylez de manière appropriée, vous pouvez obtenir ce que vous voulez.

Votre référence sur about.com est en désaccord avec la spécification sur w3.org, votre référence vous induit en erreur.

Bien qu’il s’agisse d’une question assez ancienne, j’ai pensé partager ma solution au problème pour aider d’autres personnes susceptibles de tomber sur cette page sur Google.

Comme on l’a dit, il n’est pas permis de placer des éléments de bloc dans une balise p. Cependant, en pratique, cela n’est pas tout à fait vrai. La valeur d’affichage réelle n’est en fait pas pertinente. la seule chose à prendre en compte est la valeur d’ affichage par défaut pour la variable, par exemple “block” pour les divs et “inline” pour les spans. Si vous modifiez la valeur d’affichage, le navigateur ferme prématurément le tag p.

Cependant, cela fonctionne également dans l’autre sens. Vous pouvez styler une balise span pour qu’elle se comporte exactement comme une balise div, mais elle sera toujours acceptée dans l’environnement p.

Donc, au lieu de faire ceci:

 

test

Tu peux le faire:

 

test

Rappelez-vous simplement que le navigateur valide le contenu de l’environnement p de manière récursive, alors même quelque chose comme ceci:

 

test

Entraînera ce qui suit:

 

test

Espérons que cela aidera quelqu’un là-bas 🙂

La page webdesign.about.com est tout simplement incorrecte. ils ont probablement mal compris les brouillons HTML5. Autoriser DIV à l’intérieur de P causerait une grande confusion; Je ne pense pas que cela ait même été pris en compte lors du développement HTML5.

Si vous essayez d’utiliser DIV dans P, la balise de démarrage DIV fermera implicitement l’élément P. Cela explique probablement les choses que vous avez vues.

Pour éviter le problème, n’utilisez pas P si le contenu contient ou peut contenir un élément DIV. Utilisez plutôt DIV.

Il est impossible de placer un élément

dans un

dans le DOM, car l’ouverture de la

va automatiquement fermer l’élément

.

ne permettra pas d’autres éléments à l’intérieur. seuls les éléments et autorisés

Dans

nous ne pouvons append que des balises liées au texte. référez ce lien pour en savoir plus