calendar not rendered correctly in Chrome [closed]

问题

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 6 years ago.

My page uses the FullCalendar jQuery plugin to shows a monthly event calendar. If events occur on the same day, a very small space is left between them when the calendar is viewed in Firefox or IE, as shown in the screenshot below:

On the other hand, if the same page is viewed in Chrome, a large (unwanted) space is shown between these events:

How can I eliminate this empty space when the page is viewed in Chrome?

Update

I removed all bootstrap styles from the app and the problem no longer occurs, so I guess there's some bootrap CSS rule(s) which are being applied to the rendering of the calendar in Chrome only. Now I just need to figure out which rule(s)....

回答1:

Fixed

Strangely, the layout problem was caused by this CSS rule

    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;
    }

I changed it to:

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

and the problem is resolved

回答2:

One thing is for certain, it somehow involves whatever is setting the code for the inline top positioning on the wrapping a element. Both Firefox and Chrome are setting the first element to top: 52px but the second element is being placed differently, with Firefox setting it to top: 95px and Chrome to top: 137px.

This top positioning difference is likely because of the height difference being set on the div nested inside the div with class fc-day-content. The height of that div is 170px in Chrome, but 65px in Firefox. Now, the items in question are actually overlaid onto the fc-day-content structure, they are not direct children of it. But apparently the code must read the height of that structure somehow to calculate where to place the items in relation to the "day" they are overlaying. So the taller height of the div inside fc-day-content in Chrome may be affecting it (or the reverse, the placement of the a is affecting the height of the fc-day-content nesting).

I've not yet tracked down the code that is placing those items positions.

回答3:

The plugin calculates the position of the calendar-event wrong. I would suggest initializing the calender on load event instead of ready. So replace the

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

part with

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

and see if any progress.

Additional feedback would be helpful in the research, BR.

回答4:

You should try using relative positioning: for a elements like so

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

来源：https://stackoverflow.com/questions/14468781/calendar-not-rendered-correctly-in-chrome