CSS granice zakłócające pozycjonowania absolutnego

Question

[EDIT: wyjaśnić, że box-sizing: border-box nie wydaje się stosowne, ponieważ używam pozycjonowanie bezwzględne]

Poniższy kod ilustruje mój problem. Używam pozycjonowania absolutnego, ponieważ odkryłem, że jest to jeszcze trudniejsze dzięki układowi opartemu na przepływie, ale jestem otwarty na sugestie. To, czego chcę, to granice wokół dowolnych elementów, bez granic wpływających na pozycjonowanie węzłów. (Obramowania mogą być przycięte lub nadpisane przez zawartość, ale to nie ma znaczenia).

W szczególności, granice rodzica muszą być w stanie pokrywać się z z granicami jego dzieci, co nie jest domyślne zachowanie. Atrybut box-sizing CSS można ustawić na border-box, aby uzyskać pożądany efekt, ale tylko (jak sądzę) z elementami śródliniowymi. Nie ma to wpływu na elementy z absolutnym pozycjonowaniem (jak rozumiem).

Tak więc, moim podejściem było użycie ujemnego marginesu, aby zrównoważyć pozycje dzieci o szerokość granicy. Faktycznie wydaje się, że to zneutralizuje efekt obecności granicy, ale niestety nie w sposób spójny pod względem czynników skalujących. W dużych skalach wszystko wygląda dobrze. Przy domyślnym powiększeniu Chrome w przeglądarce pozycjonowanie elementu jest nieco mniejsze (wydają się zbyt wysokie); jeśli zmniejszę się, pozycja elementu gaśnie w innym kierunku.

Ale jeśli całkowicie usunę granice, układ wydaje się skalować w porządku.

Moje pytanie brzmi: czy istnieje wiarygodny (skalowalny) sposób na umieszczanie granic na elementach HTML bez wpływu na pozycjonowanie elementów?

[W przykładzie użyłem różnych kolorów dla niektórych granic. Chciałbym zobaczyć tylko czarne, ale w niektórych czekać widzę czerwone i zielone granice, pokazując, że pozycja elementu jest zagrożona przez obecność granicy.]

dzięki Roly .bordered { pozycja : absolutny; wysokość: 18 pikseli; 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> 

Answer 1

Wypróbuj CSS2 outline właściwość:

.bordered { 
    outline:2px solid blue; 
} 

Outline nie wpływa na pozycję elementu.

Można również użyć CSS3 outline-offset jak widać tutaj: http://www.css3.info/preview/outline/

Answer 2

Odkryłem również, że przy użyciu granicę zerowej szerokości (tak, że nie ma to wpływu na układ), a następnie dodanie box-shadow emulować widoczna granica, wydaje się działać dobrze.