button - 如何强制 标签显示 :inline?

Question

检查一下:

http://codepen.io/maxwbailey/pen/vGKBr

现在，当您不将鼠标悬停在它们上面时它们看起来很好，但是当您将鼠标悬停在 <button> 上时和 <input>元素，您会看到它们下方的文本在悬停在 <a> 上时略有颠簸。元素不会导致相同的效果。那是因为 <button>和 <input>元素显示为 inline-block尽管 inline 仍然存在(它处理边框、填充和边距的方式与常规 display: inline !important; s 不同)应用于它们的线。

有没有办法覆盖这个？我知道它可以通过像背景颜色相同的边框等技巧来实现，但我真的很想知道是否有办法制作它们 display: inline

注意:这里的问题不在于文本被颠簸(尽管这是它的一个结果)，而是尽管有其他说法，浏览器仍然强制按钮显示为 inline-block。 .感谢所有提供防止文本碰撞发生的方法的人，但这不是这里的真正问题。

谢谢!

Answer 1

不确定您的标记为何存在的上下文，但问题看起来是由设置字体系列触发的。如果你看看这支笔 - http://codepen.io/pnts/pen/Egwuo - 悬停在没有指定字体系列的情况下工作正常，但如果您取消注释指定字体系列的行，则跳跃开始。