今天,当我使用IonIcons时,我发现了一种奇怪的行为。
当正文具有font-family属性时,基线(我是对的吗?它是基线吗?!)更大。
JSFiddle:http://jsfiddle.net/5awcxhnv/
如果从正文中删除font-family属性,则大小非常完美。你知道这种行为的原因吗?
body {
font-family: Arial;
}
ul {
list-style:none;
margin:0;
padding:0;
line-height:80px;
background:yellow;
overflow:hidden;
font-size:2em;
}
li {
display:inline-block;
float:left;
padding:0 20px;
}
a {
display:inline-block;
}
.box {
width:1em;
height:1em;
background:red;
display:inline-block;
vertical-align:middle;
}
i {
background:red;
}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<ul>
<li><a href=""><i class="ion-close"></i></a></li>
<li><a href=""><span class="box"></span></a></li>
</ul>
更新: http://psd-labs.com/demo/ - 我想垂直对齐蓝框中心。我使用vertical-align:center;
,但由于正文上的字体,它无效。当我删除字体时,对齐是完美的。