Границы CSS, препятствующие абсолютному позиционированию

[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>

Ответ 1

Попробуйте CSS2 outline свойство:

.bordered {
    outline:2px solid blue;
}

Контур не влияет на положение элемента.

Вы также можете использовать CSS3 outline-offset, как показано здесь: http://www.css3.info/preview/outline/

Ответ 2

Я также обнаружил, что использование границы с нулевой шириной (так что это не влияет на макет), а затем добавление тени для эмулирования видимой границы, похоже, хорошо работает.

Ответ 3

Шесть лет спустя...

Другие ответы не сработали для моей ситуации, так как у коробки, которую я разрабатывал, уже была коробка-тень. Мне нужна была граница только на одной стороне, такая как border-left и border-radius, но без границы, влияющей на положение или ширину элемента. Решение, которое я придумал, состояло в том, чтобы применить границу к внутреннему элементу абсолютно позиционированного элемента.

.outer {
  position: absolute;
  width: 200px;
  height: 100px;
  border-radius: 5px;
  background-color: #c8c8c8;
}

.inner {
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    border-left: solid 5px #097fee;
    border-radius: 5px;
}

<div class="outer">
  <div class="inner">
    Some content
  </div>
</div>