Pourquoi ce HTML ne fonctionne-t-il pas ?

Question

J'ai un bloc de texte span à l'intérieur d'un paragraphe. À l'intérieur de ce bloc span, j'ai deux sauts de paragraphe. Sur webkit, le navigateur rend le premier paragraphe correctement mais revient aux paramètres par défaut du navigateur pour les deux derniers. Pourquoi ?

<style type="text/css">

span.post-content {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
}

</style>

<p><span class="post-content"> Some text here <p/> From here text loses style and adopts browser default <p/> same here </span></p>

Cela fonctionne dans tous les navigateurs sauf ceux basés sur Webkit : chrome et safari.

Answer 1

L'exemple est le suivant invalide . Corrigez les erreurs et le problème disparaîtra probablement.

1. Un élément span ne peut pas inclure un élément p
2. En HTML <p/> ne signifie pas ce que vous pensez probablement qu'il signifie
3. <p/> n'est pas autorisé en HTML Compatible XHTML
4. En XHTML, <p> ne peut pas contenir <p> (ni en HTML mais la balise de fin est facultative donc <p>foo<p>bar est valide et signifie <p>foo</p><p>bar )

Vous voulez probablement quelque chose comme ceci (et changer le CSS pour faire référence au type d'élément modifié)

<div class="post-content">
    <p>Some text here</p>
    <p>From here text loses style and adopts browser default</p>
    <p>same here</p>
</div>

Answer 2

Vous pouvez peut-être commencer par écrire du HTML bien structuré, puis voir s'il y a des problèmes.

Answer 3

Vous pouvez toujours vérifier votre code (X)HTML ici :

validateur.w3.org

Ou dans le navigateur Opera plus rapidement : clic droit -> Valider

Answer 4

Comme David l'a dit : span ne peut pas contenir p - c'est possible - mais cela n'a pas de sens - parce que span est un type d'affichage INLINE et p est un type BLOCK. Un élément span est une ligne à l'intérieur du bloc ...

comme ben l'a dit : les concepts doivent être compris - structurés ou non