与Trebuchet MS字体的奇怪错误

Question

我正在尝试使用jQuery UI主题来使用jquery.fullcalendar插件。

一切都很好，除了当用户尝试选择时间范围（周或日视图）时，选择将被移动大约一小时。您可以在this fiddle。

中看到此行为

我已经减少了问题，我得出的结论是问题来自CSS代码。在小提琴中，我复制了有问题的CSS代码（对应于jQuery UI CSS框架）。如果你删除这个CSS代码，选择工作正常（但当然没有格式）。

我一直试图找出哪个是确切的问题，但我看不到。

编辑：我已将问题缩减为this。现在，如果您从 .ui-widget 中删除“Trebuchet MS”字体，fullCalendar正常工作!!见working demo。现在的问题是，为什么？我正在使用Linux，我不知道这是否有效...

Answer 1

我发现了有问题的代码。这是

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }

Component containers下的

。特别是font-family声明。删除它会阻止奇怪的行为，但至于它为什么会导致它......没有任何线索。

http://jsfiddle.net/5tAaj/

Answer 2

从您的CSS中删除以下内容：

.fc-agenda-slots td div {
    height:20px;
}

或将其更改为：

.fc-agenda-slots td div {
    height:auto;
}

我猜字体大小超出固定div 20px的结果，导致这个“奇怪的错误”。

演示： http://jsfiddle.net/gQMvH/5/