html - 添加文本时防止包含图像的 div 调整大小

Question

我有一个 div 以网站为中心并包含一张图片。 div 扩展了它的 height 以按预期适合图片。然后我添加了一些文本，我希望它位于 div 的底部。但除此之外，div 也调整了一点点，所以它的 height 比 height higher图片。这是例子:

HTML:

<div class="siteContent">
    <img class="debug" src="../../Content/themes/base/images/pageTitle.png" /> 
    <span>
        aaa
    </span>
</div>

CSS:

body
{
    margin: 0;
}
.siteContent
{   
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    border: thin solid;
}
.debug
{
    border: thin solid;
}

结果:

不需要的效果标记为红色。

我能够通过像这样修改 CSS 来为 IE 8 和 Firefox 修复此问题:

body
{
    margin: 0;
}
.siteContent
{   
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    border: thin solid;
    position: relative;
}
.siteContent span{
    position: absolute;
    bottom: 0px;
}
.debug
{
    border: thin solid;
}

运行后，我在 Mozilla 中得到了正确的结果:

但这不适用于 Chrome 和 Safary。 如何让它适用于所有主流浏览器？

Answer 1

发生这种情况是因为图像与文本的基线对齐。尝试为您的图片设置 vertical-align: bottom 或 vertical-align: text-bottom 来解决这个问题。