填充百分比在Firefox中意外地表现

Question

我在Firefox（ v35 v39 v52）中遇到有关填充百分比的奇怪行为。我无法在Chrome中重现此问题。

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

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

元素的填充百分比为relative to its parent's width。因此，我希望元素顶部的填充将随着窗口宽度的增大而增大。这确实是我的简单<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（或任何其他浏览器）中重现此问题吗？

---

这是一个fiddle to demonstrate。在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>

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;
}

Answer 2

您可以使用伪元素来避免错误，并清除您希望的宽度为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>