填充百分比在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>

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>