Question

I’m using a basic list in my website which works fine with FF and IE. However, there is one line of pixel missing with Chrome.

JsFiddle thanks to Jared in comments.

If you don’t see the missing line, change the value of zoom, it will appear at some values (90% for instance on my PC).

Any idea of the source of the problem?

Screenshot:

The grey line jumps of one pixel.

Answer 1

The main problems found:

• On some screen sizes, the width of the dt and dd, plus the horizontal margins and padding, may be adding up to more than 100% for each line. The safest approach is to use % values for the widths, as well as the horizontal margins and padding, rather than em.
• The use of margins to place the dd tags on the same line as the dt tags is problematic. A safer way to implement the layout is to float every dt and dd tag and specify clear:both for each dt tag. It may be possible to do this correctly using margins, but floating the elements is much simpler.

Updated demo. (note: This demo hasn’t had any margins or padding added to it. The widths of the dt and dd should be reduced by however much is added to the horizontal margins or padding.)

---

Minor font problems found:

What’s consistent

• No font-family was specified, so the default serif font is used.
• No font-size was specified, so the default of 16px is used.
• line-height:2em is twice the font-size, which is twice 16px, which is 32px (shown by the height of the gray first line.
• The height of the gray first line is 32px in both Chrome and Firefox.

What’s not consistent

• In Chrome, the default serif font with a font-size of 16px renders with a baseline height of 12px (the height of a capital H).
• In Firefox, the default serif font with a font-size of 16px renders with a baseline height of 11px.

What can be avoided

The default serif font renders inconsistently in different browsers. There’s no way to prevent that font from doing so. But you can avoid some of the inconsistency by choosing a font other than the default serif font. Some fonts, like Arial, render more consistenly from browser-to-browser.

What can’t be avoided

Even then however, there will still be some inconsistencies in how text renders. Within the line-height space used by the text, the position of the text will often vary by at least 1px from browser-to-browser. That’s not something that can be prevented. It’s a result of how the operating system happens to render that particular font-family at that particular font-size with that particular line-height in that particular browser. But the inconsistency can be minimized by always specifying an explicit line-height, which has already been done in this case.

Summary

Choosing a font-family, a font-size, and a line-height helps to minimize the inconsistency. But beyond that, there will always be little inconsistencies in the text that cannot be avoided. Every website on the internet has some amount of this. It’s usually not very noticeable.