百分比填充在Firefox中表现出意外的行为

Question

我是一个有用的助手，可以翻译文本。

我在Firefox浏览器(v35 v39 v52)中遇到了奇怪的行为问题，与百分比填充有关。但在Chrome浏览器中，我无法重现此问题。

我有一个元素，其顶部填充设置为百分比，如下所示：

p {
    padding:10% 0 0;
    margin:0 0 1em;
    background-color:#CCC;
}

元素上的百分比填充是相对于其父元素的宽度而定。因此，我期望随着窗口宽度的增加，元素顶部的填充会增加。对于我的简单<p>标记，这确实是结果。

然而，当该元素被浮动或具有宽度时，百分比填充在调整窗口大小时不会按预期行为。填充在加载时是正确计算的。但是，随着窗口的调整大小，浮动或具有宽度的元素的总高度似乎保持不变。元素中的文本被不可思议地放置在获得神秘高度的区域底部。这种情况发生在像这样的元素中：

p {
    padding:10% 0 0;
    margin:0 0 1em;
    background-color:#CCC;
    float:left;
}

p {
    padding:10% 0 0;
    margin:0 0 1em;
    background-color:#CCC;
    width:150px;
}

这里有一张图片来说明我所看到的。Firebug添加了颜色编码; 紫色是填充，黄色是边距，蓝色是元素内容。

什么导致了这种不一致性？有其他人能在Firefox（或任何其他浏览器）中重现这个问题吗？

---

这里有一个演示示例, 在Firefox中，尝试展开或收缩结果窗格以查看元素调整大小。

我没有添加可运行的代码片段，因为我找不到一种简单的方法来动态调整片段区域的大小。

我添加了一个堆栈片段来演示问题。使用"全屏"按钮可以拉伸窗口的宽度。

html,body {
  margin: 0;
}
div#container {
  width: 100%;
}
p {
  padding: 10% 0 0;
  margin: 0 0 1em;
  background-color: #CCC;
}
p.width_limited {
  width: 150px;
}
p.floated {
  float: left;
}

<div id="container">
  <p>NORMAL</p>
  <p class="floated">FLOATED</p>
  <div style="clear:both;height:0;"></div>
  <p class="width_limited">HAS WIDTH</p>
</div>

- showdev

---

看起来这似乎是一个bug（或者如果你是供应商的话，是一种“替代实现”）。在页面加载时，元素的padding会适当地匹配（全部相同），但由于某些特定情况，在调整大小时无法更新padding...很奇怪。 - Jesse Kernaghan

有趣的发现，现在我理解了这个问题。"预期"的行为应该在10.6计算高度和边距中概述，但我没有时间找出它不符合哪个规则。 - Etheryte

无法在Firefox 39.0中重现错误。 - halfzebra

酷，我想我知道它是什么了，我马上会发布一个答案。 - user4563161

问题在Firefox 50.1.0中仍然存在。 - TylerH

Answer 1

很奇怪，我不确定这是否是一个bug。但是，将显示方式更改为flex似乎可以解决问题。http://jsfiddle.net/vsvp71rw/4/

p {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    padding:10% 0 0;
    margin:0 0 1em;
    background-color:#CCC;
}

- Aakash

Answer 2

你可以使用伪元素来避免此bug，并清除你希望的10%宽度的高度。

html,
body {
  margin: 0;
}

div#container {
  width: 100%;
}

p {
  margin: 0 0 1em;
  background-color: #CCC;
}

p:before {
  content: '';
  padding: 5% 0;
  display: block;
}

p.width_limited {
  width: 150px;
}

p.floated {
  float: left;

<div id="container">
    <p>NORMAL</p>
    <p class="floated">FLOATED</p>
    <div style="clear:both;height:0;"></div>
    <p class="width_limited">HAS WIDTH</p>
</div>

- G-Cyrillus

---

我不确定我理解了。看起来你已经移除了10%的顶部填充。这似乎没有达到期望的效果，即根据宽度扩展元素的高度。 - showdev

不，对我来说似乎不起作用。这是我看到的。此外，这并没有解释意外行为的原因。 - showdev

@showdev 我看到浮动元素的填充平均为8px，宽度约为80px，如果不是10％，则非常接近。对于具有宽度的元素，我测量了平均15px的填充。同样地，如果不是10％，则行为应该符合W3C的规定。我在哪里误解了你？当出现错误时，无法解释意外行为，这只是一个错误，您可以期待在下一个更新中修复它;) - G-Cyrillus

“意外行为”指的是行为与我的预期不符。请重新查看我上面的图表和代码示例。拉伸窗口的宽度会更改每个元素的顶部填充。您的示例没有这种行为。在Firefox中，意外的行为是某些元素保留了无法解释的高度（而不是填充）。 - showdev

@showdev 意外的行为是，FF在调整大小时不会刷新布局，您可以通过js强制重新流动来唤醒FF。旧版IE和旧版Opera有时也会出现这种行为。您也可以使用VW单位来强制计算onresize刷新：http://jsfiddle.net/vsvp71rw/10/。既然我现在明白了重要的宽度是父级而不是本身，那么我应该更新我的答案吗？ - G-Cyrillus