Listas horizontales en IE7

Otra vez tengo que pegarme con HTML y CSS. Es una cosa que no me disgusta, pero que sería mucho más fácil si todos los navegadores implementeran el estándar... pero eso sería demasiado bonito.

El problema que me ha surgido hoy es el siguiente:

Necesito diseñar una barra de iniciales. Esta barra es un elemento ul, que contiene una serie de elementos li, que a su vez contienen un enlace. Esta barra tiene que ser horizontal.

Mi HTML es éste:

<ul id="az-index-bar">
  <li>
    <a>...</a>
  </li>
  ...
</ul>


Y la primera aproximación que hice con CSS fue ésta:

ul#az-index-bar li{
  width:30px;
  display:inline-block;
}

ul#az-index-bar li a{
  display: inline-block;
  width:100%;
}


En Firefox, Opera y Chrome se veía bien, pero nuestro bendito Internet Explorer decidía que esto se tenía que ver en vertical. Así pues, investigando llegué a esta solución:

ul#az-index-bar li{
  display:inline;
}

ul#az-index-bar li a{
  display: inline-block;
  width:30px;
}



Los cambios eran muy básicos: cambiar el display del elemento li a inline, y darle el ancho al elemento a, en lugar de hacerlo al li.

Si yo pinto a mi perro exactamente como es, naturalmente tendré dos perros, pero no una obra de arte. -- Johann Wolfgang Goethe