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并更改了填充和位置。

Answer 2

display:inline-block在这里非常合适（至少在没有看到其余代码的情况下提出合理的建议）。您还需要删除宽度声明，因为标签标题宽度超过50px - 您现在无法注意到的原因是因为内联呈现的元素（包括具有默认<span>属性的display）可以没有应用尺寸。

工作正常in this fiddle

Answer 3

默认情况下，Span是内联元素，并且可能处理与块元素完全不同的填充。尝试设置：

.navButton {
    display: block;
}

并检查结果。

通常，您应该包含一个CSS重置脚本（Google for it）。

Firefox显示填充与所有其他浏览器不同

3 个答案: