为什么我的jQuery主题会让日历小部件在IE中搞乱？

Question

我正在开发一个基于Facebook的jquery主题，但是我在使用IE浏览器时看起来没有问题。

这是演示页面：

http://ilsken.com/fbui/

在IE8中，日历小部件日期全部被压缩到左边，看起来很简单。 我能想象的唯一可以解决这个问题的部分是：

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: #D8DFEA;
    color: #3B5998;
    font-size: 14px;
    border: 1px #D8DFEA solid;
    border-bottom: none;
    border-radius: 0px !important;
    font-weight: bold;
    }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {

    background: #627AAD;
    border: 1px solid #627AAD;
    border-bottom: none;
    color: #fff;
    border-radius: 0px !important;
    }

Answer 1

如果你的意思是单元格超出主框：我认为这是因为基于Windows的系统（使用IE）缺少Lucida Grande，并使用Tahoma渲染它而不是字母间距。在Firefox / Win中看起来和Bazzz说的一样。

在Google上搜索Lucida Grande并尝试使用它，或者更改css以便使用Arial：

在jquery.ui.theme.css中，第17行：

.ui-widget {
    font-family: arial,sans-serif;
    ...
}

或者只是让整个日历小部件变得更大：

在jquery.ui.datepicker.css中，第10行：

.ui-datepicker { width: *18em*; ... }

希望它有所帮助。