某些字符导致按钮在 html 中显示不正确？

Question

我正在开发表情符号面板，并且遇到一个问题，特定字符导致按钮显示不同，我不知道这里的原因是显示问题的代码。

\n

\r\n

\r\n

button {\n    width: 50px;\n    height: 50px;\n}

\r\n

<span>\n    <button></button>\n    <button>\xe2\x88\x9a</button>\n    <button></button>\n    <button>\xe2\x88\x9a</button>\n    <button></button> \n</span>

\r\n

\r\n

\r\n

\n

该代码导致具有平方根符号的按钮显示较低的几个像素，我不知道为什么会发生这种情况，所以我想知道为什么。我环顾四周以找出解决方案，但我还没有看到这个具体问题，所以希望这只是我忽略的简单问题，但我一直无法弄清楚。

\n

---

\n

这是一张显示按钮外观的图像。
\n

\n

Answer 1

这是由于图标高度不同造成的。

\n

考虑添加一个line-height来<button>对齐它们：

\n

\r\n

\r\n

button {\n    width: 50px;\n    height: 50px;\n    line-height: 50px;\n}

\r\n

<span>\n    <button></button>\n    <button>\xe2\x88\x9a</button>\n    <button></button>\n    <button>\xe2\x88\x9a</button>\n    <button></button> \n</span>

\r\n

\r\n

\r\n

\n