我有以下代码。这是响应式设计的简化代码：在特定的屏幕尺寸下，我只想显示图标（蓝色-via ::before），而不显示文本。
当我尝试通过font-size: 0（在:: before中将有一个图标）隐藏邮件地址时，标题的高度会增加。
当然可以使用max-height-但是有没有更清洁的解决方案？
小提琴：https：//jsfiddle.net/xs2wre4r/
<div class="header">
<span class="store-contact-email">
<a href="mailto:[email protected]">[email protected]</a>
</span>
</div>
<div class="header">
<span class="store-contact-email">
<a class="hide" href="mailto:[email protected]">[email protected]</a>
</span>
</div>
左.header框架计算= 25像素右.header框架计算= 30像素
.header {
float: left;
}
.header .store-contact-email a:before {
line-height: 18px;
vertical-align: -36%;
padding-right: 5px;
background-color: blue;
width: 30px;
display: inline-block;
}
.header .store-contact-email a:before {
content: "x";
}
.store-contact-email {
border: 1px solid red;
}
.store-contact-email a {
font-size: 18px;
}
.store-contact-email a.hide {
font-size: 0px;
}
问题在于::before块的字体大小。
由于第二个字体的字体大小为0，线高为18，因此它将垂直放置在基线周围，上方9px，下方9px。第一个（具有正常的字体大小）将正常放置（取决于确切的字体），例如上方14像素和下方4像素。
（您也可以vertical-align使用::before，但这不会改变情况；它将两个::before块都向下移动6.48像素。）
因此，由于第二个框的位置比第一个框的位置低5像素，因此边框的底部将向下推5像素。
为了显示，
span {
font-size: 18px;
border: 1px solid red;
background: rgba(255, 255, 0, .4);
}
span::before {
line-height: 18px;
vertical-align: -36%;
border: 1px solid blue;
background: rgba(0, 255, 255, .4);
width: 30px;
display: inline-block;
content: "x";
}
span.hide {
font-size: 0;
}<span>visible</span>
<span class="hide">invisible</span>解决方案：不要使用font-size：0技巧。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句