html - 将 div 内的 div 推到与 IE7 一起使用的最底部

Question

我遇到了一个小问题，我无法对齐并获得与 IE7 中的 chrome 相同的效果。我想要完成的是将带有背景的 div 推到容器 div 的底部。

JS fiddle :http://jsfiddle.net/mn34r/

代码

<div class="container">
  <img style="padding-top:20px; padding-bottom:20px" src="img/img.png">
  <div class="description"><br>
  <span style="font-weight:bold;font-size:15px;">Harry's Nose</span><br>

  <button class="btn btn-small btn-primary" type="button"><i style="color:#fff;
  </i>Read More</button>
 </div>
</div>

CSS:

.container{
    border:solid 1px #e2e2e2;
    height:327px;
    text-align:center;
    position:relative;
}

.description{
    height:110px;
    background-color:#F1F1F1;
    text-align:center;
    bottom:0;
    width:100%;
    position:absolute
}

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

在 IE7 中，top: 会覆盖 bottom:，因此您需要使用 IE6/7 hack 和 CSS 表达式。

#forceBottom {
  position:absolute;
  top:expression(
     document.documentElement.scrollTop +  
     document.documentElement.clientHeight - 
     this.clientHeight
  );
}