相同的CSS svg内容url比svg标签高4px？

Question

对此没有解释吗？

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
i {
  display: inline-block;
}
i:before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" fill="black" stroke="black"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>');
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

<i></i>
<svg viewBox="0 0 24 24" width="24" fill="black" stroke="black">
  <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>

Answer 1

这是因为aaptOptions { noCompress 'm4a' } 标签的高度取决于字体的高度，而不取决于某些svg元素。例如，如果您设置<i>，则i的高度将为31px（在我的系统上，该高度可能与您的设置不同）。如果要为i设置一个固定的高度，则需要对其进行设置。 / p>

Answer 2

确实是一个字体问题，您可以通过添加line-height:0来避免设置固定高度来轻松解决：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
i {
  display: inline-block;
  line-height:0;
}
i:before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" fill="black" stroke="black"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>');
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

<i></i>
<svg viewBox="0 0 24 24" width="24" fill="black" stroke="black">
  <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>