Chrome无法正确呈现日历

我的页面使用FullCalendar jQuery插件来显示每月事件日历。 如果事件发生在同一天,当在Firefox或IE中查看日历时,它们之间会留下很小的空间,如下面的屏幕截图所示:

在此处输入图像描述

另一方面,如果在Chrome中查看同一页面,则会在这些事件之间显示大量(不需要的)空间:

在此处输入图像描述

如何在Chrome中查看页面时消除此空白区域?

更新

我从应用程序中删除了所有引导程序样式,问题不再出现,所以我猜有一些bootrap CSS规则只应用于Chrome中日历的呈现。 现在我只需要弄清楚哪条规则……

固定

奇怪的是,布局问题是由这个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; } 

我改成了:

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

问题得到解决

有一件事是肯定的,它以某种方式涉及在包装元素上设置内联top定位的代码。 Firefox和Chrome都设置了第一个元素top: 52px但第二个元素的位置不同,Firefox设置为top: 95px和Chrome top: 137px

这个顶部定位差异可能是因为在div嵌入divheight差设置为类fc-day-content 。 该divheight在Chrome中为170px ,在Firefox中为170px 。 现在,有问题的项目实际上覆盖了fc-day-content结构,它们不是它的直接子项。 但显然代码必须以某种方式读取该结构的高度,以计算将项目放置在与它们重叠的“日期”相关的位置。 因此,Chrome中fc-day-contentdiv的较高高度可能会影响它(反之,a的位置会影响fc-day-content嵌套的height )。

我还没有找到放置这些项目位置的代码。

该插件计算日历事件的位置错误。 我建议在load event上初始化日历而不是ready 。 所以更换

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

部分与

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

并看看是否有任何进展。

其他反馈将有助于研究,BR。

您应该尝试使用相对定位:对于像这样的元素

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