When adding <!DOCTYPE html> on top of the following HTML, the height of the table changes, as p's margin is included inside the td element:
<!DOCTYPE html>
<html>
<body>
<table>
<tbody>
<tr>
<td style="border: solid 1px black;">
<p>test</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
E.g. in Chrome:
- with
<!DOCTYPE html>:
- without
<!DOCTYPE html>:
.
I know that omitting DOCTYPE will put the browser rendering in quirks mode and that the document won't be valid HTML, but still I am looking for a styling hack to make them render identically (at least in Chrome) - ideally with changing the table-related styles and not the p ones.
In my defense: I will render one and the same HTML in different contexts, with and without <!DOCTYPE html>, latter is third-party component which I don't have control on.
First, the specific quirk. This is (almost)¹ described in 15.3.9 Margin collapsing quirks of the HTML5 spec. The relevant parts of which are
The normal margin behaviour is described in 15.3.3 Flow content which gives this rule:
Since the quirks mode effect is a user-agent rule, we can simply include this normal margin behaviour in our CSS explicitly.
So for your case, to make the quirks mode behave like standards mode all you can add:
or (again, for your case) to make standards mode behave like quirks mode you can add
¹ I say "almost", because it seems that neither Chrome nor Firefox follow these rules exactly. By the rules, if the p element was wrapped in a div (for example) element within the td element, then the p element's margins should be applied in quirks mode as they are in standards mode. And that's what Firefox does. But not Chrome.
On the other hand, Firefox doesn't appear to treat before and after pseudo-elements of the td element as substantial content which it should, and Chrome does.
The fixes suggested above aren't affected by these differences, but the interop issues make finding any fix by applying CSS to the td element probably impossible.