CSS: un'alternativa di offset del contorno per IE?

Question

Sto usando il seguente codice per i 2 bordi di colori diversi e lo spazio tra i bordi. Sto usando la proprietà outline-offset per lo spazio tra i bordi. Tuttavia non è supportato in IE (nemmeno IE9). Esiste una soluzione alternativa che funziona anche in IE, senza aggiungere un altro div in 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;  
} 

L'altezza e la larghezza non è fisso, ho appena usato per l'esempio.

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

Answer 1

Qui ci sono due soluzioni. Il primo è compatibile IE8 +, utilizzando pseudoelements. Visualizza su 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; 
} 

La seconda idea che ho è una soluzione non-semantica, ma si dà il supporto IE6 +. Guardalo su 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, ho appena visto che ha richiesto l'invio lasciando solo un singolo div. Bene, quella prima soluzione soddisfa quei requisiti!

Answer 2

Altre soluzioni. Li ho usato con successo:

1.

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

restrizione di questa soluzione: "contorno" proprietà ignora "border-radius" uno.

2.

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

Limitazione di questa soluzione: spazio tra i bordi rossi e verdi non possono essere trasparenti perché rosso box-ombra sarà visibile attraverso di esso. Quindi, qualsiasi colore solido necessario, ho impostato #fff.

Answer 3

I miei problemi con le altre soluzioni verso questo fine:

"outline-offset" non è compatibile con IE; il metodo pseudoelements richiede posizionamento assoluto e rapporti pixel (non va bene per il mio design reattivo); l'inset-box-shadow non viene visualizzato su un'immagine.

Ecco la correzione ho usato per inquadrare responsively immagini in modo compatibile con IE:

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

"muta" definisce il bordo esterno, "confine" definisce lo spazio in mezzo, mentre il bordo interno è in realtà il colore di sfondo con imbottitura che ne determina la larghezza.

Answer 4

Nei casi in cui si sta disegnando ::focus pseudo-classe, non si avrà il lusso di usare ::after o ::before pseudo-classe come questi metodi sono efficaci solo su elementi contenitori(vedi W3C spec. per ulteriori informazioni).

Una soluzione cross-browser che invia-off che compensazione effetto è quello di utilizzare box-sizing, border e padding.

Basta negare e alternare i valori di spaziatura e larghezza del bordo.

predefinite stili/base:

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

stili pseudo-classe:

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