Question

检查出来：

现在，当你没有悬停在它们上面时，它们看起来很好，但是当你将鼠标悬停在<button>和<input>元素上时，你会发现它们下面的文字被撞了一下，将鼠标悬停在<a>元素上时不会产生相同的效果。这是因为<button>和<input>元素显示为inline-block s仍然（处理边框，填充和边距与常规inline不同），尽管{{1应用于它们的行。

无论如何都要覆盖这个？我知道通过像背景颜色相同的边框等黑客可以做到这一点，但我真的很想知道是否有办法让它们display: inline !important;正确。

注意：这里的问题不是关于被碰到的文本（虽然这是它的影响），但是，尽管一切都不是这样，浏览器仍然强制按钮显示为{{1} }。感谢所有提供防止文本碰撞发生的方法的人，但这不是真正的问题。

谢谢！

Answer 1

不确定您的标记为何存在的上下文，但问题似乎是通过设置font-family触发它。如果您看一下这支笔 - http://codepen.io/pnts/pen/Egwuo - 悬停工作正常而没有指定字体系列，但是如果您取消注释指定一条的线，则跳跃开始。

Answer 2

看来你的问题有点误导。您的按钮标签IS实际上设置为显示：正常和悬停状态的内联。听起来你的问题是如何防止下面的文字在翻滚时被撞倒。不要像现在一样使用底部边框，为什么不在悬停状态下使用以下内容来实现下划线？

text-decoration:underline;

Answer 3

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

border:1px solid transparent;

不像使用与bg相同的颜色，因为它与背景的颜色无关。

如何强制显示<button>标签：inline？</button>

3 个答案: