Вертикальное выравнивание многострочного текста в блоке

[lihih]

Здравствуйте.

Не нашёл похожей на мою ситуацию. =(

У меня есть стандартная структура меню.

<ul>
  <li>
      <a href="\">Главная</a>
  </li>
  <li>
      <a href="\">Основные <br/>документы</a>
  </li>
  <li>
      <a href="\">Приказы</a>
  </li>
  <li>
      <a href="\">Последние <br/>новости</a>
  </li>
</ul>

Делаю меню горизонтальным, представляю "a" как ячейку таблицы, что бы отцентровать двухстрочные пункты меню по центру, растягиваю "а" так, что бы закрыть вс. область кнопки, даю фон "а".

li{
float:left;
width:100px;
height:50px;
}
li a{
width:100px;
height:50px;
display:table-cell;
vertical-align:middle;
background:#333;
}

Во всех браузерах работает (текст кнопок и однострочный и двухстрочный центруется вертекально) и с фоном всё ОК.

Кроме IE9... в нём фоном заливается пространство только под текстом кнопок, т.е. фон текста, а не 100px на 50px.

Что я делаю не так?

[psywalker]

У меня всё в порядке везде.