[edit: уточнено, что размер поля: border-box не кажется применимым, поскольку я использую абсолютное позиционирование]
Следующий код иллюстрирует мою проблему. Я использую абсолютное позиционирование, потому что я нашел это еще более сложным с потоковым макетом, но я открыт для предложений. То, что я хочу, граничит с произвольными элементами, без границ, влияющих на позиционирование узлов. (Границы могут быть скопированы или перезаписаны содержимым, но это не имеет значения.)
В частности, границы родителя должны иметь возможность перекрываться с границами его дочерних элементов, что не является поведением по умолчанию. Атрибут размера окна CSS может быть установлен в рамку для достижения эффекта, который я хочу, но только (я считаю) с встроенными элементами. Это не влияет на элементы с абсолютным позиционированием (как я понимаю вещи).
Итак, мой подход состоял в том, чтобы использовать отрицательный запас для смещения позиций детей по ширине границы. По-видимому, это, по-видимому, отменяет эффект присутствия границы, но, к сожалению, не таким образом, который является последовательным для коэффициентов масштабирования. В больших масштабах все выглядит нормально. В браузере по умолчанию, увеличенном в Chrome, позиционирование элементов немного сбивается (они кажутся слишком высокими); если я сделаю меньше, то положение элемента будет отключено в другом направлении.
Но если я полностью удаляю границы, макет, похоже, масштабируется нормально.
Итак, мой вопрос: есть ли надежный (масштабируемый) способ иметь границы с элементами HTML, не влияя на позиционирование элементов?
[В примере я использовал разные цвета для некоторых границ. Я хотел бы видеть только черный, но при некоторых увеличениях я могу видеть красные и зеленые границы, показывая, что на положение элемента влияет присутствие границы.]
спасибо Roly .bordered { позиция: абсолютная; высота: 18px; border: 2px solid; margin: -2px; }
<span class="bordered" style="width: 55px; left: 30px;">
<span class="bordered" style="width: 8px; left: 0;">
(
</span>
<span class="bordered" style="border-color: green; width: 47px; left: 8px;">
<span class="bordered" style="border-color: red; width: 39px; left: 0;">
<span class="bordered" style="width: 8px; left: 0;">
5
</span>
<span class="bordered" style="width: 31px; left: 8px;">
<span class="bordered" style="width: 23px; left: 8px;">
Nil
</span>
</span>
</span>
<span class="bordered" style="width: 8px; left: 39px;">
)
</span>
</span>
</span>