Question

我有一个按钮，好吧......实际上是一个<li>。我用填充物塑造它而不给它任何高度。对于单击效果，我在活动时设置字体增加+1。现在，在Firefox上它扩展了按钮，这不是我想要的。在Chromium上，它做得恰到好处，并在增加字体大小的同时保持按钮大小不变。我可以通过设置按钮高度来解决这个问题 - 没问题。虽然不太理想。

但我只是想知道什么是正确的行为？字体大小应该扩展按钮还是不应该？

我认为，如果IE不受影响，两个兼容的浏览器应该就如何在常见场景中渲染内容达成一致。

感谢。

更新

我为不包括CSS而道歉。我认为措辞很简单。这是样本......

<!DOCTYPE html>

<html>
  <head>
    <title>Basal</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="base2.css">
  </head>
  <body>
    <nav>
      <ul>
        <li> Create </li>
        <li> Read </li>
        <li> Update </li>
        <li> Delete </li>
      </ul>
    </nav>
  </body>
</html>

CSS ......

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

nav ul {
  display: flex;
  border: 2px solid #232B2B;
  border-radius: 5px;
}

nav ul li {
  flex: 1;
  display: inline-block;
  border-right: 2px solid #232B2B;
  text-align: center;
  padding: 5px 0;
  cursor: pointer;
  background: #685642;
  font-size: 16px;
}

nav ul li:last-child {
  border-right: 0;
}

nav ul li:hover {
  background: #74695C;
}

nav ul li:active {
  font-size: 18px;
}

在Firefox中，每次点击它都会扩展<li>容器。在Chromium中 - 它没有。在Chromium中，它只是增加了字体大小，使容器大小保持不变。

Firefox - 28.0 铬 - 34.0.1847.116（260972）

Answer 1

如果您要增加字体大小，那么当字体变得足够大时，＆＃34; li＆＃34;容器也必须增加它的大小以保持容量。

Answer 2

我在chrome中测试你的问题，它和Firefox中的问题一样。当你在活动时设置字体增加+1时，你必须设置活动按钮的属性“padding-top”或“padding-bottom”减少相同的大小。浏览器计算按钮的高度如下：高度=边距+边框顶+填充顶+高度+填充底+下边框+边距您可以搜索CSS框模型以查看更多详细信息。

Answer 3

元素的高度通常取决于其内容的高度要求。故意在CSS规范中依赖浏览器依赖细节。增加字体大小可能会也可能不会增加高度要求;通常情况下，增加1px不会增加2px。

对于给定的代码，Firefox和Chrome（34.0.1847.131，Win 7）在激活时会增加li元素的高度。不同之处在于，在Chrome上，即使元素从活动状态返回到正常状态，增加的高度仍然存在。这可能是无意的，可能被归类为错误。（如果添加:active { background: red }，可能会更好地看到效果。）

一般情况下，除非明确设置高度，否则不应期望不同的浏览器为元素指定相同的高度。

字体大小会增加按钮音量。什么是正确的行为？

3 个答案: