CSS: alternatywa przesunięcia zarysów dla IE?

Question

Korzystam z następującego kodu dla 2 granic różnych kolorów i odstępu między granicami. Korzystam z właściwości outline-offset dla odstępu między granicami. Jednak nie jest obsługiwany w IE (nawet IE9). Czy istnieje alternatywne rozwiązanie, które działa również w IE, bez dodawania innego elementu div w html.

HTML:

<div class="box"></div> 

CSS:

.box{ 
    width: 100px; 
    height: 100px; 
    margin: 100px; 
    border: 2px solid green; 
    outline:2px solid red; 
    outline-offset: 2px;  
} 

Wysokość i szerokość nie jest ustalona, ​​mam tylko używane dla przykładu.

JSFiddle: http://jsfiddle.net/xyXKa/

Answer 1

Oto dwa rozwiązania. Pierwszy jest zgodny z IE8 +, z wykorzystaniem pseudoelements. Zobacz go na JSFiddle here.

HTML:

<div class="box"></div> 

CSS:

.box { 
    position: relative; 
    width: 100px; 
    height: 100px; 
    margin: 100px; 
    border: 2px solid green; 
} 
.box:after { 
    content: ""; 
    position: absolute; 
    top: -6px; 
    left: -6px; 
    display: block; 
    width: 108px; 
    height: 108px; 
    border: 2px solid red; 
} 

Drugi pomysł mam jest non-semantyczny rozwiązanie, ale daje wsparcia IE6 +. Zobacz go na JSFiddle here.

HTML:

<div class="outer-box"><div class="inner-box"></div></div> 

CSS:

.outer-box { 
    width: 104px; 
    height: 104px; 
    margin: 100px; 
    border: 2px solid red; 
    padding: 2px; 
} 
.inner-box { 
    width: 100px; 
    height: 100px; 
    border: 2px solid green; 
} 

Oh woops, właśnie widziałem, że wystąpił o pozostawiając tylko jednym div. Cóż, to pierwsze rozwiązanie pasuje do tych wymagań!

Answer 2

Jeszcze więcej rozwiązań. Używałem je pomyślnie:

1.

.box { 
outline:2px solid green; 
border:2px solid transparent; 
box-shadow: 0 0 0 2px red inset; 
} 

Ograniczenie tego rozwiązania: "Zarys" własność ignoruje "border-radius" jeden.

2.

.box { 
border: 2px solid green; 
box-shadow: 0 0 0 2px #fff inset, 0 0 0 4px red inset; 
} 

ograniczanie tego rozwiązania: przestrzeń pomiędzy czerwonym i zielonym granic nie mogą być przezroczyste, ponieważ czerwone pole cień będzie widoczny przez nią. Tak więc, potrzebny jest dowolny stały kolor, ustawiłem #fff.

Answer 3

Moje problemy z innymi rozwiązaniami wobec tego celu:

"outline-offset" nie jest kompatybilny z IE; metoda pseudoelementów wymaga bezwzględnego pozycjonowania i współczynników pikseli (nie jest to dobre dla mojego responsywnego projektu); Wstawka-cienia nie wyświetla się nad obrazem.

Oto dylemat Kiedyś responsively ramy obrazów w sposób zgodny IE:

.container img { 
     border:2px solid white; 
     outline:4px solid red; 
     background-color: green; 
     padding: 2px; 
} 

„Zarys” wyznacza granicę zewnętrzną, „granica” oznacza przestrzeń pomiędzy, podczas gdy granica wewnętrzna jest rzeczywiście kolor tła z wypełnieniem określającym jego szerokość.

Answer 4

W przypadkach, gdy jesteś stylizacji pseudo-klasę ::focus, nie będą mieli luksus korzystania ::after lub ::before pseudo-klasy jak te metody są skuteczne tylko na elementów kontenerowych(patrz W3C spec. aby uzyskać więcej informacji).

Roztwór przekroju przeglądarka otrzymując dwupołożeniowy kompensowania efektu jest stosowanie box-sizing, border i padding.

Po prostu neguje i zmienia naprzemiennie wartości wypełnienia i szerokości obramowania.

domyślne style/bazowe:

input[type="text"] { 
    ... 
    padding:10px; 
    border:1px solid grey; 
} 

Pseudo-klasa style:

input[type="text"]:focus { 
    padding:8px; 
    border:3px solid red; 
}