2012-06-14 32 views
23

Estoy usando el siguiente código para generar una barra horizontal. Funciona en versiones antiguas de navegadores pero no en Internet Explorer 9. No estará visible hasta que haga clic en 'Vista de compatibilidad'. ¿Tenemos un suplente para esto o ha sido reemplazado?reemplazo de la regla horizontal <hr> etiqueta

<hr style="color:#F87431 ; height:7px "/> 

Respuesta

27

Trate

<hr style="background:#F87431; border:0; height:7px" /> 
+0

No será visible, esto es lo que probé; ( –

+0

Lo siento, está apareciendo ahora. Me perdí la frontera: 0 propiedad. Gracias ... –

13

HR en su forma original, como STRIKE, B etc., estaban demasiado orientadas hacia el diseño y la presentación.

HTML 5 está moviendo el marcado hacia una estructura más semántica con más énfasis en el diseño que se coloca en CSS y elementos multimedia.

De la documentación del W3C:

In HTML 4.01, the <hr> tag represented a horizontal rule. 
In HTML5, the <hr> tag defines a thematic break. 
However, the <hr> tag may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms. 

lo que sólo necesita para diseñarlo muy bien.

-6

intentar algo como esto:

<div style="color:#F87431;height:7px;">-------------------</div> 

No utilice el HR, ya que está en desuso en esta etapa, y sólo usar CSS en línea para la prueba ;-)

+0

Cambios en HTML5: aunque las versiones anteriores de HTML definían el elemento hr solo en términos de presentación, al elemento ahora se le ha dado el propósito semántico específico de representar una "ruptura temática a nivel de párrafo". vea http://dev.w3.org/html5/markup/hr.html – Oliver

+0

Aún así no se debe usar, se ve horrible y los desarrolladores que mantengan su marcado en el futuro pensarán que está bien reutilizarlo si lo ha usado - y es posible que no diseñen su fealdad inherente. En la práctica, debe ser evitado. – IrishChieftain

+0

Personalmente evitaría el grosor, ya que parece grueso .... – IrishChieftain

14

También he usado div's para esto, algo así como <div style="width: 100%; height: 7px; background: #F87431; overflow: hidden;">

+0

Esto me dio una alternativa, es genial ... Gracias –

+0

Gracias amigo, salvó mi día. estaba buscando una alternativa para


muchas gracias –

Cuestiones relacionadas