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元素一起使用，您可以在此处看到：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

这样可以为span提供更好的显示效果，您可以将其视为块而非线条。

修改

如果您不希望将span呈现为块，则只需将margin-top: 3px;添加到float div，因为此处的问题是由{在您的范围{1}}中，您有两种选择可以删除它或将边距添加到div。

这里是updated Fiddle。

Answer 2

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

Answer 3

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

http://jsfiddle.net/thisizmonster/0ne3pay2/5/

对齐内联元素背景的顶部

3 个答案: