css - 在 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

您是否尝试过从 display: inline-block; 更改 .a0(等)？显示:表格；？

如果这弄乱了您的布局，请考虑将 .a0 包装在带有内联 block 的容器中。