Question

似乎我测试的所有属性::除了line-height之外的作品。它在各种浏览器中都是一致的。我在规范中没有看到这一点。难道我做错了什么？如果没有，是否有一个干净的解决方法？我想为div的主体和::之前设置不同的行高。编辑：经过进一步研究，如果线高大于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

您必须在line-height上定义div，因为div:before需要div line-height，而不是:before 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：inherit作为跨浏览器的伪作用。您可能还需要尝试一下，看看它是否适合您。

line-height不能使用:: before伪元素

2 个答案: