CSS no funciona en Chrome (Linux y Windows)

tengo este código:CSS no funciona en Chrome (Linux y Windows)

<style type="text/css"> 
div { 
margin: 100px auto; 
width: 0px; 
height: 0px; 
border-right: 30px solid transparent; 
border-top: 30px solid red; 
border-left: 30px solid red; 
border-bottom: 30px solid transparent; 
border-top-left-radius: 30px; 
border-top-right-radius: 30px; 
border-bottom-left-radius: 30px; 
border-bottom-right-radius: 30px; 
position: relative; 
} 
</style> 
<div></div>

que producen:

haflcircle

en Firefox,

pero en cromo (Linux , y Windows - no lo intenté en Mac) no veo nada ¿por qué?

Fuente

2012-02-20 rcs20

Creo que es un tipo de error, en realidad. Funciona para mí si cambias la altura y el ancho a 1px. Esto deja un pequeño punto blanco, desafortunadamente, pero eso se puede arreglar cambiando el fondo a rojo y el clip de fondo al contenido.

JSFiddle example.

Fuente

2012-02-20 15:12:55

oh gracias, ahora está trabajando – rcs20

Parece un error. Si se deshace del radio del borde, muestra un triángulo muy bien. –

Agregaré que los desarrolladores del navegador pueden argumentar que esto NO es un error. Me he encontrado con este problema antes y llegué a la conclusión de que para tener un 'border-radius', un elemento debería ser al menos 1px. Hay un método matemático de cómo 'border-radius' se calcula y representa. Si se permitiera un radio de borde alrededor de algo con una altura/ancho de 0, entonces el cálculo matemático para renderizar sería borked. – Brian

porque diste 0px 0px anchura y la altura de la div por lo que no se ve nada.

width: 0px; 
height: 0px;

Cambie esto, espero que sea visible.

Fuente

2012-02-20 15:15:22

Los elementos con un ancho y alto de 0 siguen siendo visibles (bueno, sus bordes son). Los uso todo el tiempo para las flechas de CSS. Esta situación particular parece ser un error de renderizado por parte de Chrome. –

Gracias pero cuando uso un div con 0px de ancho y alto y si ese div no contiene nada (no hay texto ni nada dentro) no veo nada. –

CSS no funciona en Chrome (Linux y Windows)

Respuesta

Cuestiones relacionadas