Styling a hr per internet explorer

Ehi, nel mio tentativo di creare un sito il più leggero ansible, sto cercando di creare due toni hr.

L’ho raggiunto nei browser moderni, ma voglio ottenere lo stesso effetto in ie6 e 7.

Il codice corrente che sto usando è

hr { border-bottom:1px solid #FFFFFF; border-top:1px solid #dcdcdc; clear:both; height:0; border-left:0px; border-right:0px; } 

Ho provato, senza successo, a far funzionare questo in ie6 e 7 senza dover indirizzare specificamente i browser. qualche idea?

(Ecco il mio progetto attuale in cui sto utilizzando questo codice, e sto cercando di renderlo cross browser – http://www.qwibbledesigns.co.uk/preview/aurelius/ )

Saluti

opaco

Prova invece una cosa come la seguente (e sostituisci


con

)

 div { /* no need for border-left/right with the following: */ border: none; border-bottom:1px solid #FFFFFF; border-top:1px solid #dcdcdc; clear:both; height:0; width: 100%; } 

(e non dimenticare di aggiungere un ID o una class per impedire a tutti i div di apparire strani)

NOTA: questo funziona su IE7, IE8 e su browser compatibili. Probabilmente ha bisogno di più ritocchi per IE6 di 10 anni, o ha anche bisogno di un hack d’immagine (come così spesso).

Non ho visto alcuna buona risposta per questo, ma anche se il mio lavoro ha capito che il codice seguente dovrebbe funzionare per lo styling di una HR per sembrare coerente in firefox, safari, chrome e IE (non sono sicuro che funzioni sotto IE7).

 hr { color:#bfbfbf; /*used for IE, top color*/ background:#bfbfbf; /*firefox and chrome, top color*/ min-height: 0px; /*required to get IE to render the top pixel color*/ border-left: 0px; border-right: 0px; border-top: 1px solid #bfbfbf; /*Your top color*/ border-bottom: 1px solid #ffffff; /*Your bottom color*/ } 

Se i clienti hanno già intonacato il sito con i tag


, puoi semplicemente impostare lo stile hr così come la class hr, quindi scambiare i tag


per ie6 e ie7.

Usa gli css postati da Abel:

 hr, .hr { /* no need for border-left/right with the following: */ border: none; border-bottom:1px solid #FFFFFF; border-top:1px solid #dcdcdc; clear:both; height:0; width: 100%; } 

Quindi nel tuo file js inserisci:

 if ($.browser.msie && $.browser.version.substr(0, 1) <= 7) { $("hr").replaceWith('
'); }

ovviamente jQuery è richiesto per questa correzione, ma ha funzionato bene per me.

Penso che il modo più semplice sia usare

. Styling


cross-browser è eccezionale, nella mia esperienza.

 hr { /* hr css reset */ color: white; /* if parent element's background is white - old ie versions fix */ border: 0; background: transparent; height: 0; margin: 0; /* hr css reset end */ /* custom styles */ margin: 20px 0; border-top: 1px solid red; } 

Impostare l’altezza su 2px ha risolto il problema per me.

 hr { margin: 1em 0 1em 0; border: none; border-top: 1px solid #000; height: 2px; display: block; }