Вертикальное выравнивание (для IE!)

Question

HTML:

<div class="product">
  <a href="#" class="thumb"><img src="img/thumb_md.png" alt="" /></a>
</div>

CSS:

.product .thumb {           
  position: relative;
  display: table-cell;
  vertical-align: bottom;
  height: 130px;
}

..отлично работает в современных браузерах, за исключением, конечно, IE!

Есть ли обходной путь?Другое решение, которое я попробовал, — это положение: абсолютное;внизу: 0;но это мешает раскрывающемуся списку выше, где z-index, похоже, не имеет никакого эффекта.

Спасибо!

Answer 1

Да, вместо этого используйте относительное + абсолютное позиционирование.Вкратце это:

a.thumb { display: block; position: relative; height: 130px; }
a.thumb img { display: block; position: absolute; bottom: 0; }

Видеть Абсолютное позиционирование внутри относительного позиционирования.