似乎我用::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;
}
2条答案
按热度按时间bogh5gae1#
您必须在
div
上定义line-height
,因为div:before
需要div
line-height
,而不是:before div
。所以,这样写:检查这个:http://jsfiddle.net/sandeep/weGGn/3/ '
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.你可能也需要尝试一下,看看它是否适合你。