Firefox 显示填充的方式与所有其他浏览器不同答案

【问题标题】：Firefox displaying padding differently to all other browsersFirefox 显示填充的方式与所有其他浏览器不同
【发布时间】：2012-08-10 05:45:43
【问题描述】：

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

【问题讨论】：

您是否想要 9px 和 4px 的内边距（“必须设置顶部和底部内边距.. 但是在 Firefox 中.. 必须是 [set] ..”） , 或者他们 rendering 为 9px 和 4px？
此外，就风格而言，您将使用速记 CSS 节省大量代码行。边框：1px 实心 #171717;填充：4px 10px 4px 10px；只是一个提示:)
@SeanThompson 我不知道有一个短手边框属性，但我现在将使用它，谢谢！
@pst 我会将填充保持在 9px，因为它适用于除 FF 之外的所有浏览器，但需要找出为什么它在 FF 中呈现不同的原因。我检查了 FF 中的元素，它说填充是 9px，我没有注意到任何不同的样式

标签： html css firefox cross-browser

【解决方案1】：

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

.navButton {
    display: block;
}

并检查结果。

一般来说，您应该包含一个 CSS 重置脚本（Google 为它）。

【讨论】：

这不起作用，它只是将选项卡从工具栏中取出。选项卡必须是内联元素才能在工具栏中正确显示。内联块也不起作用，并在所有浏览器中创建一个奇怪的边框
哦，一个 css 重置脚本什么也没做，而且有点搞砸了其他部分的一些小事情，所以我会离开它。

【解决方案2】：

我有一个小提琴，现在可以正常工作了。我已将其设置为 display: inline-block 并更改了填充和位置。

【讨论】：

【解决方案3】：

display:inline-block 在这里非常合适（至少是一个合理的建议，无需查看其余代码）。您还需要删除宽度声明，因为您的选项卡标题大于 50 像素 - 您现在无法注意到它的原因是因为内联呈现的元素（包括 <span> 与默认 display 属性）不能有尺寸应用于他们。

工作正常in this fiddle

【讨论】：