Question

使用Glyphicon对齐挣扎，显然我不明白字体大小是如何工作的。 In this fiddle我有两个包含相同字体大小的符号的div，但最终它们的高度不同。

＆＃13;

body {
  line-height: 1;
  font-family: Helvetica;
  font-size: 60px;
}
.wrapper {
  background: lightblue;
  width: 300px;
  height: 100px;
  position: relative;
}
.left {
  width: 50%;
  position: absolute;
  left: 0;
  background: darkred;
}
.right {
  width: 50%;
  position: absolute;
  right: 0;
  background: darkgreen;
}
.text::before {
  content: "60px";
}
.myglyphicon {
  font-family: 'Glyphicons Halflings';
 }
.myglyphicon::before {
  content: "\e046";
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="left">
    <span class="myglyphicon"></span>
  </div>
  <div class="right">
    <span class="text"></span>
  </div>
</div>

＆＃13;

似乎不同的字体类型可以为相同的字体大小产生不同的高度，但我仍然不明白为什么div.right忽略超大的跨度并且具有正确的（线）高度60px，但div.left没有？更重要的是，跨度高度相差4px，但div相差9px？！

Answer 1

实际上它们的高度相同。使用inspect元素查看发生的情况。问题出在容器和容器中跨度的位置。将显示块添加到myglyphicon，然后两者的跨度位置将相同。

.myglyphicon::before {
    font-family: 'Glyphicons Halflings';
    content: "\e046";
    display: block;
}

什么是font-size，为什么这两个框的高度不同？

1 个答案: