在IE7中如何將文本垂直對齊到固定高度容器中的底部

Question

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>

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>

如果在FF或其他瀏覽器中看到，則“ .a0 p”和“ .a1 .b1”中的文本在底部對齊。 盡管“ .a0 p”中的內容長或短，但文本在底部對齊。

問題是IE7，在兩種情況下我都無法將這兩個內容底部對齊。

我的限制是：1.“ .testing”容器必須具有固定的高度，因為它們將彼此並排放置，因此應顯示相同的高度。2.右側的內容不會改變，而左側的內容可能會更短（僅在一行中）或更長（可能在下一行中換行）

有什么想法可以解決IE7中的對齊問題？

Answer 1

您是否嘗試過從顯示中更改.a0（等）：inline-block; 顯示：表格；？

如果這弄亂了您的布局，請考慮將.a0包裝在帶有內聯塊的容器中。

Answer 2

行高方法不適用於IE7。 請參閱http://css-response.com/alignment/中的支撐解決方案