“vertical-align: baseline” causes a list margin bug in IE 6/7

If you use Eric Meyer’s version of Reset CSS, be careful of the side effect of “vertical-align: baseline” in IE.

In reset.css:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    ...
    vertical-align: baseline;
    ...
}

It can cause some IE bugs in list items (and table cells, but not mentioned in this post).

A list item with background color and border-bottom: 1px solid #fff should looks like this:

Expected result: the list items sit directly next to each other without an extra margin.

But if you use reset.css, it might look like this:

IE 6/7 bug: vertical-align: baseline adds an unexpected margin between the list items.

It costs me 2 hours to figure out what the bug is, and how to solve it. So here is the easy fix:

#blah li {
    vertical-align: bottom;
}

Hope I will not need to google it one day.