0

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

3 回答 3

0

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

于 2012-08-14T00:39:38.257 回答
0

display:inline-block在这里会很合适（至少是一个合理的建议，没有看到其余的代码）。您还需要删除宽度声明，因为您的选项卡标题超过 50 像素 - 您现在无法注意到它的原因是因为内联渲染的元素（包括<span>使用默认display属性）无法应用尺寸。

在这个小提琴中工作正常

于 2012-08-14T08:43:35.837 回答
-1

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

.navButton {
    display: block;
}

并检查结果。

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

于 2012-08-13T23:47:23.327 回答