<div class="logo fl clearfix">
<h1><a href="">LOGO</a></h1>
</div>
.fl{
float: left;
}
/* 左浮动 */
.clearfix::before,
.clearfix::after{
content: "";
display: table;
}
.clearfix::after{
clear: both;
}
.header .logo h1 a{
display: inline-block;
width: 207px;height: 70px;
background-image: url(../images/logo.png);
background-size: 100%;
font-size: 0;
/* 让背景图上面的文字隐藏掉 */
}
关键代码如上
结果如图:
如果把相关的a标签转换为块标签,则可以解决上面的问题.
问题在于:为什么不能设置为行内块标签呢?为什么设置为行内块标签会出现这个异常现象?