Button 如何强制a<；按钮>；要显示的标记：内联？

看看这个：

现在，当您不将鼠标悬停在它们上面时，它们看起来很好，但是当您将鼠标悬停在

和

元素上时，您会看到它们下面的文本有点颠簸，而将鼠标悬停在

元素上不会产生相同的效果。这是因为

和

元素仍然显示为

内联块

s（处理边框、填充和边距的方式与常规

内联

s不同），尽管

显示：内联！重要的应用于它们的行

是否有任何方法可以覆盖此项？我知道这是可以通过像边框和背景颜色一样的黑程序来实现的，但是我真的很想知道是否有办法让它们正确地
显示：inline

注意：这里的问题不是文本被碰撞（尽管这是它的一种影响），而是尽管所有的说法都是相反的，浏览器仍然强制按钮显示为
内联块
。感谢大家提供了防止文本碰撞发生的方法，但这不是真正的问题

谢谢
 你的问题似乎有点误导。您的按钮标记实际上设置为在正常和悬停状态下显示：inline。听起来您的问题是如何防止下面的文本在翻滚时被撞倒。为什么不在悬停状态下使用以下命令来实现下划线，而不是像当前一样使用底部边框

text-decoration:underline;

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

border:1px solid transparent;

不像使用与bg相同的颜色那样令人讨厌，因为这样背景的颜色无关紧要。
不确定标记为什么会这样存在，但问题似乎是由设置字体系列引发的。如果你看一看这支笔，悬停在没有指定字体系列的情况下可以正常工作，但是如果你取消对指定字体系列的行的注释，跳转就开始了
 默认情况下，这些元素已经内联放置，因此在CSS中声明
display:inline
实际上不会改变任何内容。至于他们为什么会在边境上这样做。。。我不知道。谢谢你的回复，但至少在FF和Chrome中，这些元素不是内联放置的，而是作为内联块放置的。其中一个不同之处是它们处理边框的方式不同，正如您可以从按钮元素和
元素之间的差异中看到的。我在上面做了相同的评论，但为了清晰起见，我将在这里再次发布。感谢您的回复，但至少在FF和Chrome中，这些元素不是内联放置的，而是作为内联块放置的。它们之间的区别之一是它们如何处理边框，正如您可以从悬停在按钮元素和我的演示中的元素之间的区别中看到的那样。我不想使用下划线，因为这不是我想要达到的效果。在某种程度上，这仍然是我不想要的。如果我可以让
元素显示为内联而不是内联块，那么这个问题很容易解决。（阅读其他帖子上的评论，了解更多这方面的信息）+10分的创意，但这只是因为两种不同字体之间的行距差异。如果打开这些按钮上的inspector，您将看到它们仍然显示为
inline block
s。