Хотя свойство font-size является в CSS наследуемым, наследуются вычисленные значения, а не процентные. Таким образом, элемент strong наследует значение font-size, равное 12px, и в соответствии с объявленным значением 135% размер шрифта составляет 16.2px (что, вероятно, будет округлено до 16px). Для абзаца сноски процентное значение вычисляется относительно значения font-size, унаследованного от элемента body и равного 15px. Вычислив 75% от этого значения, получаем 11.25px. Как и ключевые слова, задающие относительные размеры, процентные значения относятся к накопительным. Таким образом, следующая разметка отображается:
-
p {font-size: 12px;}
em {font-size: 120%;}
strong {font-size: 135%;}
<p>This paragraph contains both<em>emphasis and strong
emphasis</em>, both of which are larger than the paragraph text. </p>
<p> 12px <em>14.4px 19.44px </em> 12px </p>
Значение размера элемента strong, вычисляется следующим образом:
12 px x 120% = 14.4px
14.4px x 135% = 19.44px (возможно округление до 19px)
Однако существует альтернативный сценарий, в котором окончательное значение несколько иное. В этом сценарии агент пользователя округляет размер, выраженный в пикселах, и затем дочерние элементы наследуют эти округленные значения. Хотя это поведение с точки зрения спецификации было бы некорректным, давайте предположим, что рабочий агент это делает. Итак:
12px × 120% = 14.4px [14.4px ≈ 14px]
14px × 135% = 18.9px [18.9px ≈ 19px]
Даже если предположить, что агент пользователя выполняет округление на каждом этапе, конечный результат этих двух вычислений и предыдущих будет одинаковым: 19 пикселов. Однако при вычислении процентных значений погрешность округления накапливается и по мере увеличения количества этих операций растет. Проблема неконтролируемого масштабирования может также иметь и другие последствия. Представим на мгновение документ, состоящий из ненумерованных списков, многие из которых вложены друг в друга. Некоторые из этих списков имеют четыре уровня вложенности. Представьте результат применения к этому документу следующего правила:
ul {font-size: 80%;}
На четвертом уровне вложенности вычисленное значение font-size ненумерованного списка составляло бы 40,96% размера шрифта предка самого верхнего уровня. Размер шрифта каждого вложенного списка составлял бы 80% размера шрифта его родительского списка, что все более и более затрудняло бы чтение каждого последующего уровня. Аналогичная проблема может возникнуть, если для верстки документа применяются вложенные таблицы. Тогда можно было бы написать такое правило:
td {font-size: 0.8em;}
В любом случае, скорее всего, получится страница, практически непригодная для чтения.