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:

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

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:

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

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

   1  #blah li {
   2      vertical-align: bottom;
   3  }

Hope I will not need to google it one day.