Нечетное вычисление процентного пробирования по положению с размером окна: рамка;

Question

Б скрипки настроить тестовый случай: http://jsfiddle.net/5M7X7/2/

У меня есть любимый проект сгибания некоторых border-box макетов. Я вижу странное (но кросс-браузерное) поведение со слоистыми блочными элементами.

В соответствии с примером существует 3 divs: первый имеет фиксированную высоту и ширину, его ребенок имеет высоту и ширину 100%, а также прописку% с двух сторон, а его ребенок - 100% высоты и ширины.

Вертикальная прокладка рассчитывается с использованием ширины. Это какая-то умышленная причуда border-box? Есть ли трюк с использованием css, чтобы заставить его вести себя «как и следовало ожидать», используя высоту для вычисления вертикального заполнения?

Мне не нужен обходной путь JS, а также другой способ размера моей маленькой коробки. Меня интересует именно этот макет, почему это происходит, и если есть чистый, простой способ css, чтобы заставить его «вести себя».

EDIT Видимо, набивка% рассчитываются в процентах от ширины, независимо от коробчатых размеров вы используете. Я никогда не за все свои годы, поскольку передние разработчики сталкиваются с этим раньше. Если кто-то знает хорошее обходное решение, я все уши.

Спасибо!

Answer 1

This is actually part of the CSS spec, поэтому это поведение является правильным и должно соответствовать тому, что вы ожидаете.

Если вы хотите получить пояснения по поводу , почему, то они фактически не предоставляют один, но он предположил, что это связано с тем, что высота родителя зависит от высоты ребенка, а высота ребенка зависит от процентного заполнения.

РЕДАКТИРОВАТЬ: Чтобы развернуть это немного, вычисление ширины не зависит от модели коробки ребенка; ширина ребенка может вырасти из родительского, если не указано.

span, div { 
    display: inline-block; 
    border: 1px solid black; 
} 
span span { 
    padding: 50%; 
} 
<span><span>foon</span></span> 
<div><div>foon</div></div> 

http://jsfiddle.net/XHDEL/