El calendario no se procesó correctamente en Chrome

Mi página utiliza el complemento FullCalendar jQuery para mostrar un calendario de eventos mensual. Si los eventos ocurren el mismo día, queda un espacio muy pequeño entre ellos cuando el calendario se ve en Firefox o IE, como se muestra en la siguiente captura de pantalla:

introduzca la descripción de la imagen aquí

Por otro lado, si se ve la misma página en Chrome, se muestra un gran espacio (no deseado) entre estos eventos:

introduzca la descripción de la imagen aquí

¿Cómo puedo eliminar este espacio vacío cuando la página se ve en Chrome?

Actualizar

Eliminé todos los estilos de bootstrap de la aplicación y el problema ya no ocurre, así que supongo que hay algunas reglas CSS de bootrap que se aplican a la representación del calendario solo en Chrome. Ahora solo necesito averiguar qué regla (s) …

Fijo

Curiosamente, el problema de diseño fue causado por esta regla CSS

  a { -webkit-transition: all 0.15s ease-out 0s !important; -moz-transition: all 0.15s ease-out 0s !important; -o-transition: all 0.15s ease-out 0s !important; transition: all 0.15s ease-out 0s !important; } 

Lo cambié a

  a { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; } 

y el problema esta resuelto

Una cosa es cierta, de alguna manera implica lo que está configurando el código para la posición top línea en la envoltura de a elemento. Tanto Firefox como Chrome están configurando el primer elemento en la top: 52px pero el segundo elemento se coloca de manera diferente, con Firefox configurándolo en la top: 95px y Chrome en la top: 137px .

Esta diferencia de posicionamiento superior es probable debido a que la diferencia de height se establece en el div nested dentro del div con la clase fc-day-content . La height de ese div es 170px en Chrome, pero 65px en Firefox. Ahora, los elementos en cuestión en realidad se superponen a la estructura de fc-day-content , no son hijos directos de ella. Pero al parecer, el código debe leer la altura de esa estructura de alguna manera para calcular dónde colocar los elementos en relación con el “día” que se superponen. Por lo tanto, la altura más alta del div dentro del contenido de fc-day-content en Chrome puede afectarlo (o al revés, la ubicación de la a está afectando a la height de la anidación del fc-day-content ).

Todavía no he rastreado el código que coloca esas posiciones de elementos.

El complemento calcula incorrectamente la posición del evento de calendario. Sugeriría inicializar el calendario en load event lugar de ready . Así que reemplace el

 $(document).ready(function() {..... 

parte con

 $(window).load(function() {..... 

y ver si hay algún progreso.

Comentarios adicionales serían útiles en la investigación, BR.

Debes intentar usar posicionamiento relativo: para elementos como tal

 position: relative; width: 195px; margin-top: 30px; float: left;