html - Firefox 以不同于所有其他浏览器的方式显示填充

Question

我有一个选项卡，两边都有两个边框，边框必须填充它们所在的工具栏，为了实现这一点，我使用了填充。在 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;
           }

Answer 1

display:inline-block在这里会很合适(至少在没有看到其余代码的情况下是一个合理的建议)。您还需要删除宽度声明，因为您的选项卡标题比 50px 宽 - 您现在看不到它的原因是内联呈现的元素(包括 <span> 和默认 display 属性)不能有维度应用于他们。

工作正常 in this fiddle