不知道大家平时写代码的时候有没有发现一个问题,就是有时候设置某段文字font-size:0;的时候,整行高都会突然变高,如下图。
-75

以下是代码:

html部分

<div class="div1">
    <p>x<span>x</span>sjdkdfg奥斯卡了多少卡回复</p>
</div>

css部分

.div1 {
    width: 500px;
    line-height: 20px;
    background: #999;
}
p {
    margin: 0;
    padding: 0;
}
span {
    font-size: 0;
}

原因就是因为即使span的字体大小为0,但是他的高度还是继承了父元素的line-height:20px;这就导致高度存在会占据位置,我测试下Firefox和chrome浏览器,基本上都是增加了6.3-6.4px,不管父元素高度设置多高都是增加这么多,但是如果父元素字体设置变大了,增加的高度也会跟着变大。

解决方法就是让span元素高度为0,line-height:0;

为什么会这样,这个可能和幽灵空白节点有关,具体就需要查一下官方文档了。我们接着深入看下现在span是怎么回事。
-75
我们给span设置好inline-block,添加一个宽度,加个背景色,可以看到span元素是显示往下位移的,而且整体的高度并没有再次改变,这就说明span元素发生了位移才导致的高度变高,那么为什么会位移?

这里我再给大家一张图:
-50

左边是一个x字符,用来当做字符,右边是一个inline-block的div元素,我们可以看到div有内容的时候,他们的字符会基线对齐,然后div会自动往下位移已达到对齐的效果,这也是inlie-block元素的一个特性,那么我们再看span,这个span并没有字符呀,为什么也会下降呢?

这里就要说道“幽灵空白节点”了,每一个行框盒子,就是包裹inline内容的一行,这一行你可以理解为鼠标选中文字时,背景色显现出来的区域,只要有行框盒子就会有幽灵空白节点产生,这个幽灵节点不显示也不会占据宽度,用来使文字内容对齐,而现在span里面字体消失,但幽灵节点还在,加上父元素设置了line-height:20px;导致幽灵空白节点会和文字内容对齐,也会使span的高度下移来达到对齐效果。

既然我们猜测完了,就该测试一下是不是“幽灵节点”导致,我们在span的前面加一个x字符,这样就一目了然了,如下图:
-75

一个和x差不多的高度和字符对齐,那么这足以证明我们的猜测应该是正确的,所以,以后遇到这种问题,就可以想到,原来是这个东西在作怪,于是只要将他的高度设置为0px,就不会出现这样的问题了。

分类: CSS 标签: font-sizeline-height幽灵空白节点高度反而增高高度重置

评论

暂无评论数据

暂无评论数据

目录