没有文字呈现的Html按钮与文本不一样

Question

Html按钮元素，例如行中的5个按钮呈现不同， 按钮文本呈现在相同的顶部位置，但按钮没有文本  呈现小上层。 让我告诉你 https://jsfiddle.net/zznjrv9L/ HTML

<button>234</button>
<button></button>
<button>234</button>
<button>234</button>
<button></button>

CSS

 button{
  height:25px;
  width:25px;
  }

我在Chrome中尝试过它。 如何修复所有按钮呈现在同一顶部位置？

Answer 1

对按钮使用内联块，并使用顶部/中间/底部作为其一致性：

button{
  height:25px;
  width:25px;
  display: inline-block;
  vertical-align: top;
}

demo

Answer 2

带有文本的按钮使用文本来计算它们的对齐方式。没有文字的按钮没有这样的信息以其他方式对齐。似乎您必须将至少一个字符放在按钮上才能正确对齐。一种选择是放置一个没有宽度的空格（使用代码或名称）：

<button></button>
<button>&#8203;</button>
<button>234</button>
<button>&ZeroWidthSpace;</button>