在IE7中如何将文本垂直对齐到固定高度容器中的底部

Question

The HTML:

<div class="testing">
    <div class="a0"><p>Monday, 07 May 2014 00:00 AM</p></div>
    <SPAN class="a1"><SPAN CLASS="b1">abc</SPAN></SPAN>
</div>
<div class="testing">
    <div class="a0"><p>Tuesday, 07 October 2014 00:00 AM</p></div>
    <SPAN class="a1"><SPAN CLASS="b1">abc</SPAN></SPAN>
</div>

The CSS:

  <style type='text/css'>
  body {
      font: 12px/1.136 arial,verdana,sans-serif;
  }
.testing {
    width: 245px;
    border: 1px solid red;
    background-color: grey;
    height: 25px;
}
.a0 {
    display: inline-block;
    width: 70%;
    float: left;
    background-color:  green;
    vertical-align:bottom;
}
.a1 {
    float: right;
    line-height: 25px;
}
.b1 {
    display: inline-block;
    height: 20px;
    vertical-align: bottom;
}
p {
    margin: 0;
    display: table-cell;
    height: 25px;
    vertical-align: bottom;
}
  </style>

If you see in FF or other browsers, the text in ".a0 p" & ".a1 .b1" is bottom aligned. Though the content in ".a0 p" is long or short, the text is bottom aligned.

Problem is IE7, I'm not able to bottom align both these contents in both cases.

My restrictions are : 1. ".testing" container has to have fixed height because they will sit beside each other and hence should show equal height 2. The content in right hand side will not change whereas content in left hand side might be shorter (just in one line) or longer (might wrap on next line)

Any ideas to fix this alignment issue in IE7 ?

Answer 1

Have you tried changing .a0 (etc.) from display: inline-block; to display: table;?

If this messes up your layout, consider wrapping .a0 in a container with inline-block.

Answer 2

The line-height method does not work for IE7. See prop up solution in http://css-response.com/alignment/