Chrome/WebKit creando una barra sólida al usar bordes, bordes y bordes superiores e inferiores

Question

Google Chrome está actuando con errores utilizando el radio del borde, el color de fondo y los bordes superior e inferior. Aquí está la evidencia y el código para reproducir:

http://jsfiddle.net/6ADtd/4/

<div></div>​ 

div { 
    background:blue; 
    border-top:10px solid red; 
    border-bottom:10px solid red; 
    border-radius:20px 20px 0 0; 
    height:100px; 
    /* 
    border-right:1px solid transparent; 
    */ 
} 

El border-right:1px solid transparent; es un truco sugerido en los comentarios, que ayudaba a eliminar la barra sólida medio no deseados , pero cuando cambia el tamaño la ventana/navegador - aparece de nuevo. Tiene algo que ver con la proximidad del elemento al borde de la ventana del navegador, no lo entiendo del todo. Tienes que cambiar el tamaño y, a veces, desplazarte sobre el elemento. videos de mi escritorio:

• http://www.screenr.com/6wU8 (sin borde derecha)
• http://www.screenr.com/NVU8 (con border-right)

He intentado -webkit- prefijos en varias propiedades y no pudo arreglalo.

Lo publiqué por primera vez porque necesitaba una solución rápida para un sitio web específico, pero ahora me doy cuenta de que aparece en varios sitios y he averiguado qué lo causa. Eso es lo que obtengo por no probar nada excepto Firefox. Probablemente esto sea un error y debería informarlo, pero mientras tanto sigo necesitando una solución.

La solución ideal es con CSS, por lo que puedo escribir uno o dos selectores en el archivo CSS para la corrección en lugar de buscar archivos de plantilla y en la base de datos para aplicar div-wrap u otras correcciones de marcado. ¿Alguien sabe algún truco para deshacerse de este error?

Answer 1

En el momento de mirarme en esta cuestión, todavía había un problema on the prod website visible cuando se cambia el tamaño del navegador para forzar el desplazamiento horizontal en el documento:

La "solución" que utilicé fue aplicar tanto

border-left:1px solid transparent; 
border-right:1px solid transparent; 

a #header con herramientas de desarrollo - esto parece forzar la situación que se vaya sin importar el cambio de tamaño, por lo menos en un Mac Chrome 18.

Esto parece un comportamiento problemático para mí - Especulo que tendría algo que ver con las esquinas de fusión donde se cruzan los colores, que, debido a un error, terminan sangrando en el elemento en sí.

He intentado, bastante infructuosamente, buscar en la posible conexión entre un radio de borde superior al ancho del borde que causa este comportamiento. Esto fue, por supuesto, untrue - jugar con diferentes radios x/y no arrojó ningún resultado sin tener aplicada la "solución" de lo anterior. Es bueno saberlo, supongo.

Answer 2

Lo siento, estaba siendo un poco vago con mi respuesta inicial.

¿Qué hay de envolver un div con las propiedades de borde alrededor de la cabecera con rebosadero oculto: http://jsfiddle.net/jugularkill/Jsdcz/

Answer 3

nunca he visto tal comportamiento en Chrome, de hecho, muy verde. De todos modos, puedes deshacerte del borde inferior y funcionará bien. Si es posible, simplemente agregue un <div> con fondo rojo en la parte inferior.Algo como esto:

http://jsfiddle.net/6ADtd/5/

O un CSS única solución, añadir contenido después de su div:

http://jsfiddle.net/Cthulhu/6ADtd/6/