jQuery UI日历显示太大，想要演示大小？
所以我下载了jQuery的自定义主题UI，并将日历控件添加到我的网站（例如： 链接文本 ）。 在这个例子中，它显示/显示我想要的大小，但在我的网页上它的大小是它的两倍。 为什么？？？
我有很多其他的CSS，但我无法控制页面的外观（不能触摸当前的CSS，MEH !!）。 有没有办法让我的网站上的演示看起来？
我认为这是jQuery UI的代码，可能会使事情变得复杂
/* Component containers ----------------------------------*/ .ui-widget { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1.1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1em; } .ui-widget-content { border: 1px solid #B9C4CE; background: #ffffff url(..http://img.dovov.comui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #616161; } .ui-widget-content a { color: #616161; } .ui-widget-header { border: 1px solid #467AA7; background: #467AA7 url(..http://img.dovov.comui-bg_highlight-soft_75_467AA7_1x100.png) 50% 50% repeat-x; color: #fff; font-weight: bold; } .ui-widget-header a { color: #fff; } 它是自定义用户界面CSS的一部分
我想到了。 这是字体大小是扔掉整个事情。 我添加了这个标签来正确显示我想要的尺寸：
#ui-datepicker-div { font-size: 12px; }
如果有其他人需要这样的东西，效果很好
.ui-widget{ font-size: 0.8em; }
这是解决scheme，但是，我不知道的是，如果你把它放在这样的头元素：
<style type="text/css"> .ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.8em; } </style>
它覆盖其他设置 ，所以你仍然可以加载谷歌托pipe的CSS，但用它来覆盖它=）
要修复日历控件的大小更改此：
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1.1 em; }
对此：
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.8em; }
有关详细说明，请访问 – http://blog.greatdevelopers.com/?p=33
如果你想为所有jQuery的小部件设置字体大小或字体系列，最好是这样设置：
.ui-widget { font-size: .7em; }
加载jQuery UI CSS文件后调用。
所有jQuery UI组件都是小部件，并在顶层inheritance了.ui-widget样式。
一个DOM检查器（例如Firebug，IE Developer Toolbar等）可以帮助你确定哪些CSS样式影响你的日历。
也许任何一方阻止你接触CSS将允许你在一个容器内自由掌权？ 也就是说，
<div id="foo">Your stuff goes here. All your selectors must start with #foo</div>
如果没有，你显然已经控制了JS。 你应该能够用它来编写内联样式。
编辑
你也可以看看你是否可以把你的内容包装在一个iframe中。
为了使我的日历更小，我不得不对CSS进行一些更改。
正如其他一些人已经提到，我添加了以下行到我的网页内的样式标签（所以它不会影响我的网站上的所有其他dateselect器）
div.ui-datepicker{ font-size:7px;}
但是这只会使标题尺寸变小（月份）。 为了使星期几的标签和date数字更小，我不得不复制jquery-ui-1.8.18.custom.css中的以下两行，并将它们放在我的页面中，但是我也必须添加字体两种尺寸的尺寸。
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;} .ui-datepicker td { border: 0; padding: 1px; }
所以我最终得到的是以下内容：
<style type="text/css"> div.ui-datepicker{ font-size:7px;} .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; font-size: 1.6em;} .ui-datepicker td { border: 0; padding: 1px; font-size: 1.6em;} </style>
这使我可以控制date和年份，工作日标签和date编号的字体大小。
我会build议你使用
.ui-datepicker { font-size:10px !important; }
而不是使用
#ui-datepicker-div { font-size:10px !important; }
因为与使用仅用于特定元素的元素select器相比，css类select器具有更广的范围。 所有你需要做的就是创build类的另一个html元素，你不必担心任何事情。
然而，在你的问题，你不必做任何事情只是添加类select器到自己的CSS文件而不是jQuery的UI，你sorting，如果你需要创build另一个dateselect器，你将不必担心再这样修改css。
使用CSS缩放
.ui-widget{ -ms-transform: translate(-15%,-15%) scale(0.7);//translate must be before scale -moz-transform: translate(-15%,-15%) scale(0.7); -webkit-transform: translate(-15%,-15%) scale(0.7); transform: translate(-15%,-15%) scale(0.7); }
在上面的代码中，我使用了“sclale（0.7）”，这意味着新的宽度和高度将是原始值的70％。 变换后的元素将具有原始元素的相同中心 ，因此减less30％的宽度，这意味着从左侧减less15％，从右侧减less15％，同样的事物为高度。 所以我们必须使用translate将新元素移动到左上angular。 “翻译”必须在“比例”之前，因此“15％”将是原始宽度的15％（即在我们缩放之前），而不是在转换之后的新宽度。
检查你的页面上没有css冲突 – 例如html / body或容器字体大小的设置将stream向日历。
无论你想要什么大小你可以通过在CSS中编辑这一行来设置。
.ui-widget { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1.1em; }
只需提供另一种字体大小如.5em或.8em
.ui-widget { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: .5em; }
它会工作，我不这样做。
这很简单：Jquery-ui只是使用对象样式来完成他的工作。 我的意思是 ：
<html> <body <input type="text" id="date"/> <script type="text/javascript"> $("#date").datepicker()</script> </body> </html>
date编号和munth名称的大小将在$（“＃date”）。css（“font-size”）的函数中设置。 所以，如果input的字体大小为6px，那么datepicker会显得很小。 如果字体大小是42pt，这将是一个盲人的dateselect器！
我只是偶然发现了这一点，但尝试将DOCTYPE html添加到您的文档
<!DOCTYPE html> <html> <body> </body> </html>
在你打开html标签之前。
