¿Hay alguna manera de deshacerse del borde del elemento <hr> en IE6 sin un ajuste en otro elemento? Otro requisito es no hacks, por desgracia.make <hr> etiqueta invisible en IE6?
He conseguido hacerlo para todos los navegadores por labrar la frontera como tal:
hr.clear {
clear: both;
border: 1px solid transparent;
height: 0px;
}
embargo IE6 todavía rinde una línea blanca de 1 píxel.
display: none no funciona porque está eliminando por completo el <hr> del flujo de elementos. Eso hace que deje de limpiar tus flotadores.
Si está de acuerdo con ocultarlo por completo, simplemente use visibility: hidden en su lugar. Seguirá despejando carrozas, y esto funciona en todos los IEs:
hr {
clear: both;
visibility: hidden;
}
Bang on. ¡Gracias! – montrealist
claro: ambos eran IMPRESCINDIBLES para mí, visibilidad: solo ocultos no funcionaban ... –
¿Qué tal esto:
Sí, vi esto. Pero no necesito una imagen, solo necesito que sea invisible del todo. – montrealist
.. 'display: none;' simplemente lo ocultaría y el 1px de espacio vertical que el póster desea habrá desaparecido. – Hristo
No necesito esconderlo sino simplemente deshacerte de su borde. Lo necesito como un elemento de limpieza. Por lo tanto, 'display: none' no es una opción. – montrealist
Así que el problema es que IE no considera <hr> fronteras como "fronteras". Si establece
border: 1px #f0f solid;
... que va a añadir un borde alrededor del borde fucsia biselado existente. Afortunadamente, Firefox e IE8 hacen esto igual y se dan cuenta de que border: 0; significa que no quiero un borde. Desafortunadamente, IE 7 y las versiones más bajas no hacen esto.
Así que para responder a su pregunta ... sin ... no hay una manera de deshacerse de la frontera en <hr> elemento en IE6 sin envolverlo en otro elemento o hackearlo (no he Encontré una manera de hacer esto desde mi experiencia).
Sus opciones son o bien envolver el <hr> en un <div>, si tiene un color de fondo sólido, establecer la propiedad color a la del color de fondo, o utilizar las imágenes para el fondo.
Opción 1:
<div style="height:1px; background: transparent;">
<hr style="display:none;" />
</div>
Opción 2:
hr.clear {
border: 0 none;
height: 1px;
color: #ffffff; /* if your bg is white, otherwise choose the right color */
}
Opción 3 ... mira esto: http://blog.neatlysliced.com/2008/03/hr-image-replacement/
sentimos que el IE (versiones anteriores) no juega las normas. Espero que esto ayude.
¿Por qué no 'border: none'? Creo que incluso funciona en IE6. – zneak
Ambas soluciones arriba dejan una línea de 1 px en TODOS los navegadores IE. Estoy probando con IETester e IE8 en Windows. – montrealist