我的网页使用FullCalendar jQuery plugin来显示每月活动日历。如果事件发生在同一天,当在Firefox或IE中查看日历时,它们之间会留下很小的空间,如下面的屏幕截图所示:
另一方面,如果在Chrome中查看同一页面,则会在这些事件之间显示大量(不需要的)空间:
如何在Chrome中查看该页面时消除此空白区域?
我从应用程序中删除了所有引导程序样式,问题不再出现,所以我猜有一些bootrap CSS规则仅应用于Chrome中日历的呈现。现在我只需要弄清楚哪条规则......
答案 0 :(得分:2)
奇怪的是,布局问题是由这个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;
}
问题已解决
答案 1 :(得分:1)
有一件事是肯定的,它在某种程度上涉及为包装top
元素设置内联a
定位的代码。 Firefox和Chrome都将第一个元素设置为top: 52px
,但第二个元素的位置不同,Firefox将其设置为top: 95px
,将Chrome设置为top: 137px
。
这种最大的定位差异可能是因为height
嵌套在div
内的div
与fc-day-content
类的height
差异。 div
的{{1}}在Chrome中为170px
,在Firefox中为65px
。现在,有问题的项目实际上覆盖在fc-day-content
结构上,它们不是它的直接子项。但显然代码必须以某种方式读取该结构的高度,以计算将项目放置在与它们重叠的“日期”相关的位置。因此,Chrome中div
内fc-day-content
的较高高度可能会影响它(反之,a
的位置会影响height
fc-day-content
嵌套)。
我还没有找到放置这些项目位置的代码。
答案 2 :(得分:0)
该插件计算日历事件的位置错误。
我建议在load event
而不是ready
初始化日历。
所以替换
$(document).ready(function() {.....
部分
$(window).load(function() {.....
并查看是否有任何进展。
其他反馈将有助于研究,BR。
答案 3 :(得分:0)
你应该尝试使用相对定位:对于像这样的元素
position: relative;
width: 195px;
margin-top: 30px;
float: left;