css - 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> 的结果标签。

但是，当该元素 float 或具有宽度时，百分比填充在调整窗口大小时不会按预期表现。填充是在加载时正确计算的。但是，随着窗口大小的调整， float 元素或具有宽度的元素的总高度似乎保持不变。元素中的文本莫名其妙地放置在一个神秘高度的区域底部。这种情况发生在这样的元素上:

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 中，尝试扩展或收缩结果 Pane 以查看元素的大小调整。

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

我添加了一个堆栈片段来演示这个问题。使用“整页”按钮可以拉伸(stretch)窗口的宽度。

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

这很奇怪。我不确定这是否是一个错误。但是，通过将显示更改为 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;
}