Actualmente estoy trabajando en un prototipo que utiliza múltiples columnas CSS3 para dividir el contenido y parece funcionar bien. Mi problema es que dentro de un bloque que es parte de las columnas hay una sección de altura que se expande y bueno, en Firefox cuando la altura de un elemento dentro de un CSS3 multicolumna cambia, desaparece y luego Firefox se bloquea.

¿Las columnas múltiples CSS3 no deberían tener en cuenta el contenido de altura variable en el interior o no están hechas para ese tipo de cosas? Realmente odiaría tener que usar un complemento como Columnizer, porque Columnizer es un dolor en el trasero para que funcione correctamente.

Aquí está el diseño:

[DIV]
    [CONTENT] - Default height is 38 pixels
    [EXPAND LINK] - A link when clicked that modifies the height of content to be 52 pixels.
[/DIV]

El problema es que tan pronto como se hace clic en el enlace y cambia la altura, es como si perdiera su diseño y posición (la altura y el ancho cambian a 0), luego Firefox se bloquea. Este también es el caso si utilizo Firebug para cambiar la altura manualmente.

1
Dwayne Charrington 5 mar. 2012 a las 09:37
Necesita ver su código o una página de prueba.
 – 
BoltClock
5 mar. 2012 a las 09:44
En realidad, acabo de resolver el problema, eso siempre sucede. ¿Debería ponerlo como respuesta o simplemente cerrar la pregunta?
 – 
Dwayne Charrington
5 mar. 2012 a las 09:47
Si no cree que la respuesta ayude a nadie (por ejemplo, fue un error tonto en su código), puedo cerrarlo por usted.
 – 
BoltClock
5 mar. 2012 a las 09:49
No se debió a ningún error, sino más bien a un malentendido de cómo se supone que funcionan las columnas múltiples CSS3 y que alguien más podría encontrar. Gracias BoltClock.
 – 
Dwayne Charrington
5 mar. 2012 a las 09:51
Bueno, si cree que publicar una respuesta ayudará a otros que puedan compartir su malentendido, le animo a que publique :) De lo contrario, siga adelante y levante una bandera.
 – 
BoltClock
5 mar. 2012 a las 09:52

1 respuesta

La mejor respuesta

Resolví el problema correctamente, estoy publicando esta pregunta básicamente y mi solución fue la siguiente en caso de que alguien más se encuentre con este problema, lo cual creo que algunos lo harán.

Tenía un elemento div principal con el código de múltiples columnas CSS3 apropiado. Los elementos internos son elementos del artículo (aunque podría usar div's). El problema era que los elementos internos del artículo se dejaban flotando (solo por el puro hábito de tener que flotar cosas para dar la apariencia de artículos en columnas). Los elementos flotantes chocaban con el código de varias columnas CSS3, lo que provocaba que el navegador se bloqueara.

Supongo que debido a que un flotador modifica el diseño de un elemento, el código de varias columnas intentaba quizás reajustar la caja y luego entrar en un bucle sin fin. No estoy del todo seguro de lo que sucedió, pero los elementos flotantes dentro de un div de varias columnas o algo es malo.

0
Dwayne Charrington 5 mar. 2012 a las 09:56
¿Publicar un ejemplo de trabajo? Todavía tengo el problema incluso con el flotador eliminado.
 – 
Daniel
7 nov. 2014 a las 03:55
Aquí hay un jsfiddle para mostrar el problema. Aviso: sin flotadores. jsfiddle.net/0s6L50f4
 – 
Daniel
7 nov. 2014 a las 04:18