Pregunta

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;
}

.. funciona muy bien en los navegadores modernos, excepto, por supuesto, IE!

¿Hay alguna solución? La otra solución que probé fue position: absolute; parte inferior: 0; pero interfiere con el desplegable de arriba, donde no parece z-index para tener algún efecto.

Gracias!

¿Fue útil?

Solución

Sí, uso relativo posicionamiento absoluto + en su lugar. El barebone de eso es:

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

Posicionamiento absoluto Posicionamiento relativo En el interior .

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top