line-height 不适用于 ::before 伪元素

Question

似乎我用 ::before 测试的每个属性都有效，除了行高。它在浏览器之间是一致的。我在规范中没有看到这一点。我做错了什么吗？如果没有，是否有一个干净的解决方法？我想要 div 主体和 ::before 的行高不同。编辑：经过进一步研究，如果行高大于 DIV 行高，但不小于，它似乎有效。这绝对看起来像一个错误。我添加了第四个 DIV 来演示这一点。

HTML:

<div id="content1">content<br />content<br />content<br /></div>
<div id="content2">content<br />content<br />content<br /></div>
<div id="content3">content<br />content<br />content<br /></div>
<div id="content4">content<br />content<br />content<br /></div>

CSS:

div {
    display: inline-block;
    height: 150px;
    line-height: 20px;
    width: 110px;    
}

div::before {
    color: red;
    content: "before \a before \a before \a";
    font-family: courier new;
    font-size: 10px;
    letter-spacing: 10px;
    white-space: pre;
}

#content1::before {
    line-height: 10px;
}

#content2::before {
    line-height: 8px;
}

#content3::before {
    line-height: 6px;
}

#content4::before {
    line-height: 30px;   
}

http://jsfiddle.net/ThinkingStiff/weGGn/

Answer 1

您必须在 div 上定义 line-height，因为 div:before 采用 div line-高度，而不是：div之前。所以，这样写：

div:before {
    color: red;
    content: "before \a before \a before \a";
    font-family: courier new;
    font-size: 10px;
    letter-spacing: 10px;
    white-space: pre;
}

div {
    line-height: 10px;
}

检查一下： http://jsfiddle.net/sandeep/weGGn/ 3/'

Answer 2

@sandeep 回答的一些补充：

行高属性显然在大多数新浏览器中的工作方式相同。您可能会遇到 Windows Phone 浏览器的问题（即使用 Nokia Lumia 920) 选择元素的 line-height 属性并将其应用于两者元素及其伪元素（:before, :after）。

所以底线是，您在元素本身中分配 line-height 的值，并使用 line-height:inherit 来作为跨浏览器的伪元素。您可能还需要尝试一下，看看它是否适合您。