日历无法在Chrome中正确呈现 [英] calendar not rendered correctly in Chrome

问题描述

我的网页使用 FullCalendar jQuery外挂程式显示每月活动日历。如果事件发生在同一天，当在Firefox或IE中查看日历时，它们之间留有非常小的空间，如下面的屏幕截图所示：

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:

另一方面，如果在Chrome中查看同一页面时，会在这些事件之间显示一个大的（不需要的）空间：

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

如何在Chrome浏览网页时消除这个空白空间？

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

我从应用程序中删除了所有引导样式，问题不再出现，所以我想有一些bootrap CSS规则），它们仅应用于在Chrome中呈现日历。现在我只需要找出哪个规则....

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)....

推荐答案

修复

奇怪的是，布局问题是由这个CSS规则引起的

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

我将其更改为：

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

并且问题已解决

这篇关于日历无法在Chrome中正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！