ASCII复选标记字符导致不完美的框

Question

似乎ASCII字符✓（复选标记）导致问题。您可以在此示例中看到：https://jsfiddle.net/2d3dqtdz/第二个框稍微小一些。

现在考虑使用✓（点）更改•字符，您可以看到该框是完美的。

使用复选标记ASCII字符时，如何使框看起来完美？

Answer 1

一种解决方案是为元素分配line-height。

＆＃13;

＆＃13;

.box {
  border: 5px solid #000;
  display: inline-block;
  line-height: 1em;
}

＆＃13;

<div class="box">
  &#x2713; test
  <br />&#x2713; test
  <br />
</div>

<div class="box">
  &#x2713; test
  <br />
  <br />
</div>
<div class="box">
  &#8226; test
  <br />
  <br />
</div>

＆＃13;

＆＃13;

＆＃13;