html - 对齐行内元素背景的顶部

Question

这个问题与这个问题相关:Why the computed height of inline nonreplaced element differs between browsers?

我有一个内联元素，我在其上使用背景色来提供高亮效果。 (这是图例。)

我无法准确设置背景高度的呈现，因为字体在不同浏览器中的呈现方式不同。如果这略有不同，这不是问题。

我只需要我的第一行背景的顶部与左边的图片对齐，在我下面的jsfiddle中，白色和蓝色需要对齐。有什么方法可以用 CSS 做到这一点吗？

HTML

<div class="main">
    <div class="float"></div>
    <span>Et quoniam mirari posse quosdam peregrinos existimo haec lecturos forsitan, si contigerit, quamobrem cum oratio ad ea monstranda deflexerit quae Romae gererentur, nihil praeter seditiones narratur et tabernas et vilitates harum similis alias, summatim causas perstringam nusquam a veritate sponte propria digressurus.</span>
</div>

CSS

div.main {
    min-height: 100px;
    background-color: red;
    padding: 10px;
} 

div.float {
    min-height: 50px;
    float: left;
    width: 10px;
    background-color: white;
}

span {
    text-transform: uppercase;
    line-height: 1.5;
    background-color: blue;
    padding-left: 10px;
    padding-right: 10px;
}

http://jsfiddle.net/0ne3pay2/4/

Answer 1

我认为最好的方法是将 display:table-cell; 与 float div 和 span 元素一起使用，你可以在这里看到它:

div.main {
    min-height: 100px;
    background-color: red;
    padding: 10px;
} 

div.float {
    min-height: 50px;
    float: left;
    width: 10px;
    background-color: white;
    display:table-cell;
}

span {
    text-transform: uppercase;
    line-height: 1.5;
    background-color: blue;
    padding-left: 10px;
    padding-right: 10px;
    display:table-cell;
}

<div class="main">
    <div class="float"></div>
    <span>Et quoniam mirari posse quosdam peregrinos existimo haec lecturos forsitan, si contigerit, quamobrem cum oratio ad ea monstranda deflexerit quae Romae gererentur, nihil praeter seditiones narratur et tabernas et vilitates harum similis alias, summatim causas perstringam nusquam a veritate sponte propria digressurus.</span>
</div>

这将为您提供更好的 span 显示，您可以将其视为 block 而不是线。

编辑:

如果您不希望您的 span 呈现为 block ，那么您只需将 margin-top: 3px; 添加到您的 float div 因为这里的问题是由您的 span 的 line-height: 1.5; 引起的，您有两种选择，要么删除它，要么向 div 添加边距。

这是 updated Fiddle .