html5 vertical spacing issue with <img>

Solution 1:

Why do all browsers behave differently in HTML5 mode and all have different vertical gaps between img elements, when not specified as display: block?

First of all, browsers do not have a "HTML5 mode". What they have are three modes "Quirks", "Limited Quirks" (aka Almost Standards) and "Standards" mode. There is only one difference between "Limited Quirks" and "Standards" modes and that relates to the way in which a line-height and baseline is established for the line box of which the <img> sits. In "Limited Quirks" mode, if there is no rendered text content on the line, then no baseline is established and the <img> sits on the bottom of the line box.

In "Standards" mode, the line box always contains the space for the descenders of characters like g, p and y below the baseline, even if there are no real characters in that line box.The gap you see is the distance between the baseline and the bottom of the line box which is the space for those descenders. For a thorough description, see http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29

The remedy, then, is either to stop <img> being treated as an inline element { display:block; } or to override the vertical alignment of the <img> { vertical-align:bottom; }. Either will work.

Why does XHTML Transitional not need this hack

Using the XHTML Transitional doctype places the browser into "Limited Quirks" mode. Had you used XHTML Strict, or a full HTML4 Strict doctype, you would have seen the same gaps as you see with the HTML5 doctype as each of these places the browser in "Standards" mode.

Why does XHTML Strict produce a vertical gap too

See above.

Is it safe to use img { display: block; } in a reset.css sheet?

Of course, but there will probably be times when you'll want <img> to be treated as an inline element. In those cases, you'll need to add CSS in the appropriate places to achieve that.

Solution 2:

I feel like this can't be the answer you're looking for. It's too short:

Add to the CSS of your HTML5 page: img { display: block }.

Testing in Firefox and Chrome, doing that gets pixel perfect identical rendering between your two pages.