Diseñando una hora para Internet Explorer

Question

Oye, en mi búsqueda para crear una imagen lo más liviana posible, estoy buscando crear dos horas de tono.

que he logrado esto en los navegadores modernos, pero quiero lograr el mismo efecto en IE6 y 7

El código actual que estoy usando es

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

He intentado, sin éxito para hacer que esto funcione en ie6 y 7 sin tener que dirigirse específicamente a los navegadores. ¿Alguna idea?

(Heres mi proyecto actual en la que estoy empleando este código, y mirando para que sea cruz navegador - http://www.qwibbledesigns.co.uk/preview/aurelius/)

Saludos

Matt

Answer 1

Prueba algo como lo siguiente en su lugar (y reemplazar el <hr> con un <div>)

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%; 
} 

(y no se olvide de añadir un ID o clase para evitar que todos los div parezcan extraños)

NOTA: esto funciona en IE7, IE8 y en navegadores compatibles. Probablemente necesite más ajustes para el IE6 de 10 años, o incluso necesite un hack de imágenes (como suele suceder).

Answer 2

Creo que la manera más fácil es usar <div class="hr"></div> en su lugar. Styling <hr/> cross-browser es innovador, en mi experiencia.

Answer 3

No he visto ninguna buena respuesta para esto pero mi propio trabajo descubrió que el siguiente código debería funcionar para diseñar un recurso de recursos humanos para que sea consistente en Firefox, Safari, Chrome e IE (no estoy seguro si funciona debajo de 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*/ 
} 

Answer 4

Si eres clientes ya han pegado el sitio con < hr> tag sólo puede hr estilo, así como la clase horas y luego intercambiar < hr> etiquetas en cuenta en IE6 y IE7.

Utilice el css Publicado por 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%; 
} 

A continuación, en el archivo js sólo hay que poner:

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

obviamente jQuery se requiere para esta revisión, pero funcionó bien para mí.

Answer 5

El ajuste de la altura a 2px me solucionó el problema.

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

Answer 6

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; 
}