Comportamento di rendering incoerente quando si annidano tag fuori ordine

Recentemente stavo cercando di rendere in grassetto la funzione “nascondi dettagli” e ho riscontrato questo bug. Una volta utilizzato <b> per rendere il testo in grassetto e successivamente </b> all’interno delle parentesi, il nome del titolo cambia. Si tratta di un comportamento strano e il modo migliore per descriverlo è riprodotto qui sotto:

<b>

[details="Esempio"]

</b>

Ciao!

[/details]

Risultato:

Esempio

Ciao!

Ho appena trovato un altro problema. Una volta allineato al centro e poi usato per riallinearlo all’interno delle parentesi, il testo sotto quel comando viene posizionato fuori dalla funzionalità details:

<div align=center>


[details="Ciao!"]

Sono al centro

</div>

Ciao!

[/details]

Risultato:

Ciao!

Sono al centro

Ciao!

Stai nidificando gli elementi in modo errato; non esiste un supporto per il comportamento desiderato se non intervenendo manualmente in HTML.

Questo funziona correttamente:

<details dir="ltr">
<summary dir="ltr"><b>Esempio</b></summary>
<p dir="ltr">Ciao!</p>
</details>
Esempio

Ciao!

Esattamente quello che stavo cercando. Molto apprezzato!