相关疑难解决方法(0)

首先,让我们看一段代码:

div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { line-height:1.7;  }

<div><span>123<br>456<br>789<br>000</span></div>

为什么是span的line-height未使用的？

将line-height仍然是200px,但是当我们设置span的display属性inline-block时,line-height的span使用？

见下文:

div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { display:inline-block; line-height:1.7; }

<div><span>123<br>456<br>789<br>000</span>

http://jsfiddle.net/mJxn4/

这很奇怪:我在<em>标签中包含了几行文字.无论我做什么,降低line-height低于17px 的值都没有效果.我可以将最大值line-height 提高到大于17px并适用,但我不能低于17px.

有问题的CSS是:

#others .item em {
    font-size: 13px;
    line-height: 17px;
}

尝试调整高度和低度的线高,并在每次更改后运行更新的小提琴,您将看到我的意思.

为什么会这样？line-height在CSS中的其他任何地方都没有指定,因此没有任何内容覆盖它.无论如何情况都不是这样,因为我在同一个选择器中调整line-height上下,所以没有意义的是应用更高的值,但是更低的值会被覆盖.

我希望我可以将块元素的行高设置为零,然后该元素内的每个行框将仅根据其内容的行高来对齐.但是,当我尝试在这些内联元素上使用非常小的字体时,它们似乎与行中内容所需的基线不一致.我对CSS规范的理解并不符合所有浏览器的渲染要求; 我有什么不对？

简单演示的代码看起来像这样(而且它也是一个小提琴):

body {
    font-size:60px;
}
div {
    height:3em;
    width:8em;
    border:1px solid black;
    line-height:0; /* minimum line height for contained elements */
}
span {
    line-height:normal; /* don't inherit from containing block */
    background-color: #cff; /* so we can see positioning */
}
<div><span>Big text works</span></div>
<div><span style="font-size:.5em">Half text size works fine too</span></div>
<div><span style="font-size:.2em">Very small text doesn't align with the top of the containing box. Why does this happen?</span></div>

根据CSS规范:

在内容由内联级元素组成的块容器元素上,"line-height"指定元素中线框的最小高度.

在未替换的内联元素中,'line-height'指定用于计算线框高度的高度.

我知道,对于一个简单的例子,有很多方法可以破解小文本的位置并使其最终位于包含块的顶部,但我真的很想了解文本的实际原因正在排队.