button - 如何强制一个要显示的标签：内联？

Question

看一下这个：

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

现在，当您不将鼠标悬停在它们上时它们看起来很好，但是当您将鼠标悬停在<button>and<input>元素上时，您会看到它们下方的文本有点颠簸，而将鼠标悬停在<a>元素上不会产生相同的效果。这是因为<button>and<input>元素仍然显示为inline-blocks（它处理边框、填充和边距的方式与常规inlines 不同），尽管display: inline !important;应用了线。

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

注意：这里的问题不在于文本被颠簸（尽管这是它的影响），而是尽管一切都不是这样，浏览器仍然强制按钮显示为inline-block. 感谢所有提供方法来防止文本碰撞发生的人，但这不是真正的问题。

谢谢！

Answer 1

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

Answer 2

看来你的问题有点误导。您的按钮标签实际上设置为 display:inline 在正常和悬停状态下。听起来您的问题是如何防止下面的文本在翻转时被撞倒。与其像现在这样使用下边框，为什么不在悬停状态下使用下面的方法来实现下划线呢？

text-decoration:underline;

Answer 3

同意前面的答案，但是如果您想要边框的灵活性，能够使用填充来调整它的位置等，您可以使用

border:1px solid transparent;

不像使用与 bg 相同的颜色那么 hacky，因为这样背景的颜色并不重要。