CSS: Outline-Offset-Alternative für IE?

Question

Ich verwende den folgenden Code für die 2 Rahmen unterschiedlicher Farben und den Abstand zwischen den Rahmen. Ich verwende die Eigenschaft outline-offset für den Abstand zwischen den Grenzen. Es wird jedoch nicht in IE (nicht sogar IE9) unterstützt. Gibt es eine alternative Lösung, die auch im IE funktioniert, ohne ein weiteres div im HTML hinzuzufügen.

HTML:

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

CSS:

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

Die Höhe und Breite festgelegt ist nicht, ich habe nur für das Beispiel verwendet.

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

Answer 1

Hier sind zwei Lösungen. Die erste ist IE8 + kompatibel und verwendet pseudoelements. Sehen Sie es an 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; 
} 

Die zweite Idee, die ich habe, ist eine nicht-semantische Lösung, sondern gibt Ihnen IE6 + Unterstützung. Sehen Sie es an 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, ich sah nur, dass Sie nur eine einzige div Verlangte zu verlassen. Nun, diese erste Lösung entspricht diesen Anforderungen!

Answer 2

Einige weitere Lösungen.

1.

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

Einschränkung dieser Lösung: "outline" Eigenschaft ignoriert "border-radius" one Ich habe sie erfolgreich eingesetzt.

2.

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

Einschränkung dieser Lösung: Raum zwischen roten und grünen Grenzen kann nicht transparent sein, weil rote box-shadow durch sie sichtbar. Also, jede feste Farbe benötigt, ich habe #fff gesetzt.

Answer 3

Meine Probleme mit anderen Lösungen zu diesem Zweck:

"outline-Offset" mit IE nicht kompatibel ist; pseudoelements Methode erfordert absolute Positionierung und Pixelverhältnisse (nicht gut für mein responsives Design); Inset Box-Schatten wird nicht über ein Bild angezeigt.

Hier ist die Lösung ist, ich Bilder umrahmen reagierend kompatibel Weise in einem IE verwendet:

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

„Umriss“ die äußere Grenze definiert, „Grenze“ definiert den Raum dazwischen, während die innere Grenze tatsächlich ist die Hintergrundfarbe mit der Polsterung, die ihre Breite bestimmt.

Answer 4

In Fällen, in denen Sie die ::focus pseudo-Klasse Styling sind, werden Sie nicht den Luxus haben ::after oder ::before Pseudo-Klasse verwenden, da diese Methoden nur dann wirksam auf Containerelemente(siehe W3C spec. für weitere Informationen sind).

ein Browser-Lösung zu geben, dass -off-Effekt Verrechnung ist box-sizing, verwenden border und padding.

Sie negieren und wechseln einfach die Füll- und Randbreitenwerte.

Standard/base Stile:

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

Pseudo-Klasse Stile:

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