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

nue99wik  于 2023-07-01  发布在  其他
关注(0)|答案(2)|浏览(149)

似乎我用::before测试的所有属性都可以工作,除了line-height。它在浏览器之间是一致的。我在说明书上没看到这个。我做错什么了吗?如果没有,是否有一个干净的解决方案?我想为div的主体和之前的::设置一个不同的行高。编辑:经过进一步的研究,似乎它的工作,如果线高度大于DIV线高度,但不是更小。这看起来绝对像一个bug。我添加了第四个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/

bogh5gae

bogh5gae1#

您必须在div上定义line-height,因为div:before需要divline-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/ '

5vf7fwbs

5vf7fwbs2#

一些补充@sandeep回答:
Line-height属性在大多数新浏览器中显然是一样的。您可能会遇到Windows Phone浏览器的问题(即使用Nokia Lumia 920),它选择元素的line-height属性并将其应用于元素及其伪值(:before,:after)。
所以底线是,你在元素本身中分配line-height的值并使用line-height:inherit for the pseudo that works as a cross-browser thing.你可能也需要尝试一下,看看它是否适合你。

相关问题