css – 在Firefox中意外填充百分比

我在Firefox(v35 v39)中遇到了关于百分比填充的奇怪行为。我无法在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>

解决方法

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