Процентное отступление ведет себя неожиданно в Firefox

Я испытываю странное поведение в 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>

Ответ 1

Это странно. Я не уверен, что это ошибка. Но, изменив дисплей на гибкий, кажется, решает проблему. 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;
}

Ответ 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>