Bugs CSS

Mikeliu · #1 (**permalink**) 11/02/2011, 15:23

Buenas.

Me ha parecido interesante crear este tema con el fin de poder ir recopilando entre todos los supuestos errores (bugs) que vayamos encontrando en relación con los estilos CSS.

Agradecería que en el mensaje se pusiera en negrita el nombre de la propiedad y/o su valor; el evento (o acción, momento...) u objeto (elemento, atributo...) que hace saltar el error, y el navegador (a ser posible también su versión). Así será más fácil y rápido para todos identificar el fallo en cuestión.

En el caso de no tratarse de errores sería de bastante utilidad, pues tendríamos información para depurarlos (debugs) y así cumpliríamos el cometido principal de este subforo: colaborar los unos con los otros en nuestra mejora de la estilización de las web.

Mikeliu · #2 (**permalink**) 11/02/2011, 15:49

Empiezo...

Google Chrome (v. 9.0.597.98) muestra el puntero del ratón con estilo text al seleccionar (hacer clic y desplazar ratón manteniendo apretado el botón primario) sobre un elemento de texto (h1, p, etc.) deshabilitado con la propiedad propia de Webkit -webkit-user-select (user-select, nueva propiedad CSS3) al valor none (deselección), habiendo cambiado a su vez la propiedad cursor al valor default para mantener una cierta coherencia visual. Debería mantener el mouse en default, como sí bien hace Firefox 3.6 con -moz-user-select.

Mikeliu · #3 (**permalink**) 15/03/2011, 19:48

Gecko (con Mozilla Firefox 3.6.15) confunde los selectores de hijos directos con los de descendencia al hacer uso del selector universal *.

Mi caso concreto era:

Código:

.tab > div > * { margin:auto }

Donde tab es una clase que transforma un elemento en una tabla. Su siguiente hijo (el div) es una celda y el siguiente elemento directo contenido (el que sea) debe mantenerse centrado en él.

Lo que hace en realidad es centrar cualquier elemento contenido en el div-celda.

pitufoweb · #4 (**permalink**) 16/03/2011, 19:19

Cita:

Iniciado por Mikeliu

Gecko (con Mozilla Firefox 3.6.15) confunde los selectores de hijos directos con los de descendencia al hacer uso del selector universal *.

Mi caso concreto era:

Código:

.tab > div > * { margin:auto }

Donde tab es una clase que transforma un elemento en una tabla. Su siguiente hijo (el div) es una celda y el siguiente elemento directo contenido (el que sea) debe mantenerse centrado en él.

Lo que hace en realidad es centrar cualquier elemento contenido en el div-celda.

Hola.

podrías poner el HTML?. Hice una prueba pero todo funciona bien.

Saludos.

Mikeliu · #5 (**permalink**) 16/03/2011, 19:40

Ufff... Creo que al final fue una confusión.

Lo que sucede es que la declaración de los márgenes, de los títulos p. ej. (contenidos dentro del div-celda), son ignorados una vez que se aplican los del selector universal. Éste sería un ejemplo:

Código:

<style>
  .total { width:100%; height:100% }
  .tab { display:table; margin:auto }
  .tab > div { display:table-cell; text-align:center; vertical-align:middle }
  .tab > div > * { margin:auto } /* comentando y descomentando esta línea se aprecia la diferencia */

  h1 { margin:10em auto 0 }
</style>
<div class="tab total">
  <div>
    <h1>Título</h1>
  </div>
</div>

Pero, bueno, supongo que eso ya es un comportamiento normal del motor.

pitufoweb · #6 (**permalink**) 16/03/2011, 20:25

Claro...Ese es su comportamiento normal.

Gracias por la aclaración.

Saludos.

Mikeliu · #7 (**permalink**) 17/03/2011, 04:54

Ok. En verdad gracias a ti.

Saludos.

Mikeliu · #8 (**permalink**) 24/03/2011, 16:24

Cita:

Iniciado por Mikeliu

Empiezo...

Google Chrome (v. 9.0.597.98) muestra el puntero del ratón con estilo text al seleccionar (hacer clic y desplazar ratón manteniendo apretado el botón primario) sobre un elemento de texto (h1, p, etc.) deshabilitado con la propiedad propia de Webkit -webkit-user-select (user-select, nueva propiedad CSS3) al valor none (deselección), habiendo cambiado a su vez la propiedad cursor al valor default para mantener una cierta coherencia visual. Debería mantener el mouse en default, como sí bien hace Firefox 3.6 con -moz-user-select.

También pasa exactamente con Safari. Se ve que es cosa de Webkit, motor que comparten ambos navegadores.

Mikeliu · #9 (**permalink**) 05/05/2011, 15:17

Hace unos días seguí una recomendación leída en la web de asignar una opacidad del 0.99 a los elementos que contienen texto con tal de que Safari lo mostrara correctamente.

Para mi sorpresa, hoy me he encontrado con un comportamiento inesperado de CSS. Al hacer esto (transparentar casi al 100%) los elementos párrafo, según he visto, se comen (pasan por encima) de los demás elementos, en mi caso imágenes, por mucho que cambiara los z-index.

Esto sucede en Firefox y Safari.

Mikeliu · #10 (**permalink**) 05/05/2011, 15:19

Cuando un enlace pasa a ser flotante o rodea un elemento que sí lo es, éste desaparece.

Comprobado en Firefox y Safari.

Mikeliu · #11 (**permalink**) 05/06/2011, 15:46

Visto en Firefox.

Ciertamente no sé si éste es el comportamiento correcto (ratificado por la 3WC); pero por lo visto los objetos retornados por la función getElementsByClassName no son estáticos, sino circunstancialmente dinámicos.

Me explico: Si se crea una variable en la que volcamos el objeto devuelto por la citada función de búsqueda de clases y, al recorrerla mediante un bucle, modificamos la clase de un objeto HTML (su className), dicha variable-objeto cambia su estructura. El caso es que ese elemento HTML desaparece de esta colección de elementos (el susodicho objeto devuelto por la función) al carecer de la clase buscada.