我有一个选项卡，该选项卡的两边都有两个边框，边框必须填充它们位于其中的工具栏，并且要实现此目的，我使用了填充。在Chrome，IE等中，顶部和底部的填充必须设置为9px以填充工具栏，但是在Firefox中，顶部和底部的填充必须为4px。
这是jsfiddle，其中添加了工具栏的模型。
标记非常简单；
<a href="Discover">
<span class="navButton">
Discover
</span>
</a>
我从CSS中删除了过渡和其他不需要的样式；
.navButton {width:50px; border-right-color:#171717;
border-right-width:1px; border-right-style:solid;
position:relative;
padding-left:10px; padding-right:10px;
padding-top:9px; padding-bottom:9px;
}
最佳答案
display:inline-block在这里非常合适（至少是一个合理的建议，而没有看到其余的代码）。您还需要删除宽度声明，因为制表符标题的宽度超过50像素-您现在无法注意到的原因是，内联渲染的元素（包括具有默认<span>属性的display）不能具有尺寸适用于他们。
可以正常工作in this fiddle