日历未在 Chrome 中正确呈现 [关闭]答案

【问题标题】：calendar not rendered correctly in Chrome [closed]日历未在 Chrome 中正确呈现 [关闭]
【发布时间】：2013-01-22 21:57:14
【问题描述】：

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

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

在 Chrome 中查看页面时如何消除此空白？

更新

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

【问题讨论】：

你之前问过这个问题，但目前还没有显示代码。快速浏览：似乎您已经使用了标记（在eventRender？），因为它似乎没有熟悉的fc-event-head、fc-event-content 等...
@MaxD 我认为标记本身没有任何问题，因为它是由插件本身生成的。另请参阅上面的更新。
我不认为您可以在festivals.ie/festival/calendar 处为 FullCalendar jQuery 插件使用未缩小的 .js 文件（仅出于调试目的）？此外，日历表中的第一个 td（表示 2012 年 12 月 31 日）有一个 div（div.fc-day-content 的子级），在 Chrome 中计算为 170px tall，而在 Firefox 中计算为65px 高。我怀疑a.fc-event顶部的错误计算可能与此有关。
@Don 我看不到屏幕截图？上传有什么问题还是我没有权限，我一无所知
发布一个只包含站外链接的问题并说“解决这个问题”是完全不可接受的。这就是 Stack Overflow 的用途，无论您的赏金如何。该问题需要完全独立且可回答，无需打开任何外部链接。

标签： javascript jquery css fullcalendar

【解决方案1】：

已修复

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

问题解决了

【讨论】：

【解决方案2】：

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

这种顶部定位差异可能是因为 div 上设置了 height 差异，该 div 嵌套在 fc-day-content 类中。 height 的 div 在 Chrome 中是 170px，但在 Firefox 中是 65px。现在，有问题的项目实际上覆盖在fc-day-content 结构上，它们不是它的直接子级。但显然代码必须以某种方式读取该结构的高度，以计算相对于它们所覆盖的“天”放置项目的位置。因此，Chrome 中 fc-day-content 内的 div 较高的高度可能会影响它（或者相反，a 的位置会影响 fc-day-content 嵌套的 height）。

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

【讨论】：

我也注意到了。我想知道在fc-day-content 上设置初始CSS height:0px; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; 是否会有所作为。我几周前使用的一个 jQuery 代码段需要将初始高度归零以正确补偿动态内容的高度。

【解决方案3】：

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

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

分手

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

看看有没有进展。

其他反馈将对研究有所帮助，BR。

【讨论】：

我试过你的建议，但不幸的是没有任何区别

【解决方案4】：

你应该尝试使用相对定位：对于这样的元素

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

【讨论】：