jQuery Date Picker 比预览站点大答案

【问题标题】：jQuery Date Picker is bigger than the preview sitejQuery Date Picker 比预览站点大
【发布时间】：2012-09-28 15:24:38
【问题描述】：

我正在尝试测试 jQuery 日历工具，但它appears to be too big，大于preview page。

有什么想法吗？

谢谢！

【问题讨论】：

似乎确实是字体大小和相关因素使尺寸过大 - 但我仍在尝试找出最佳解决方案，因为我希望它看起来就像在 jQuery 演示站点中所做的那样 - 他们的 css 似乎是相同的 -_-
我找到了解决方案stackoverflow.com/questions/8812401/…

标签： jquery css

【解决方案1】：

在 css 文件中更改字体大小，例如我的css文件恰好是

/css/smoothness/jquery-ui-1.8.1.custom.css

我变了

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

到

.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 0.7em;
}

【讨论】：

【解决方案2】：

我遇到了同样的问题。我不得不将自定义 CSS 中的字体大小更改为 1.25em 以外的值。我相信我使用了 small，因为这是我在应用程序其他地方使用的。

在 FireFox 中浏览页面时，我能够在 FireBug 中检查整个日历控件并将字体大小更改为中等（我认为可能很小），并且此时它呈现完美。刚刚进入 UI CSS 并永久更改它，此后没有任何投诉。

查看my post here...

【讨论】：

【解决方案3】：

或者只是添加这个 css 行：

#ui-datepicker-div {
    font-size:12px !important;
}

【讨论】：

【解决方案4】：

您可以使用Firebug's Inspect feature 选择其中一个值，您将看到哪些样式表设置了字体大小。然后，您可以根据需要进行更改。

【讨论】：

【解决方案5】：

这与 jquery 使用的 css 样式有关（这与其他人对 css 的回答有关），尤其是与 px 相比，字体大小在 em 中 - 我认为它正在尝试继承样式从页面本身，或类似的东西。

对我来说，解决方案是将 ui-widget css 类的 font-size 更改为 11px，从而得到以下 css 类：

.ui-widget {
-x-system-font:none;
font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
**font-size:11px;**
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}

【讨论】：

【解决方案6】：

您是否有任何特定的 CSS 可以调整字体大小？这将调整任何 jQuery 字体大小。

【讨论】：

【解决方案7】：

仔细检查您使用的 jQueryUI 主题是否与演示站点使用的相同。通过在我的网站上加载了错误的主题，我已经看到了这个确切的问题。

【讨论】：

是的，正在加载正确的 css 文件 - 颜色等已加载。

【解决方案8】：

样式表很可能正在控制它。查看网页的来源，要么是this one，要么是this one。

如您所见，它们本身非常丑陋，但您可以通过像 this one 这样的美化器来运行它。

或者您也可以简单地下载一个包含亮度主题的 JQuery UI 版本。我的猜测是它已经有正确的尺寸了。

【讨论】：

这没有帮助 - 设计保持不变：P

【解决方案9】：

我遇到了类似的问题。我通过使用 chrome 的开发工具检查元素解决了这个问题，并意识到包含 datepicker 的 div 元素（即 id 为 ui-datepicker-div 的 div）被附加到 body 元素。 datepicker div 的 font-size css 属性设置为 1.1em（来自 jQuery UI 的基本 css 文件中的 ui-widget 类）。由于我没有在body 元素（即包含日期选择器的元素）上设置字体大小，因此根据this blog 默认使用16px。在 body 元素上设置显式 font-size 为我解决了这个问题。

【讨论】：

【解决方案10】：

只需添加您的 css 行：

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
font-size: 0.7em;

像这样：

.ui-datepicker { width: 17em; font-size: 0.7em; padding: .2em .2em 0; display: none; }

【讨论】：