Вертикальное выравнивание (для 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; 
} 

..works большие в современном браузере, за исключением, конечно, IE!

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

Спасибо!

Answer 1

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

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

См Absolute Positioning Inside Relative Positioning.