Lightbox generates invalid HTML structure (div inside p) causing display errors

Lightbox generates a <div> tag for every image, but div tags cannot be inside p tags (in HTML-spec-speak, the content model for <p> is phrasing content, which does not include <div>). This causes browsers to make these divs close and escape the p tags. Any following content are also out of the p tag, causing issues in some environments. For example,

[details="details" open]
![random image|690x388](upload://2gkjgw9XkBQlTRrNCIxGZ96CLRC.png)
Some text *emphasized* or **bold** or @panic mention
[/details]
details


Some text emphasized or bold or @panic mention

should render as

Some text emphasized or bold or @panic mention

instead of the current

The current behaviour is a result of <details> treating every direct child a block.

2 Likes

Can you expand on this, which environments? It will help us prioritize a fix.

2 Likes

Such as in the <details> tag shown above.