jQuery UI 元素太大答案

【问题标题】：jQuery UI elements too largejQuery UI 元素太大
【发布时间】：2011-09-14 02:08:14
【问题描述】：

这里是有问题的页面：http://bit.ly/m5cyjx

几乎没有任何代码或样式。似乎 jQuery UI 元素（在这种情况下 - 选择菜单和按钮）太大了。默认情况下，它们应该很小，不会比这句话的最大高度高多少。

我直接从他们的网站获取了 jQuery UI CSS，并且我同样从该项目创建者的网站获取了 jQuery 选择菜单 CSS。即使使用默认代码，问题也没有改变。

有什么帮助吗？

编辑此外，选择菜单的右侧没有箭头，默认情况下应该有。看一下项目页面：http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

【问题讨论】：

你用的是什么浏览器？我在 Firefox 4 中看起来不错。
你应该添加一个 CSS 重置，这样大小就不会依赖于浏览器的默认值（尤其是因为 jQuery UI 样式表使用“em”）
您的大部分问题都可以通过分析 Firebug（Mozilla Firefox 中）或开发者工具（Google Chrome 中）显示的内容轻松解决。这是您当前样式 + 自定义 jQuery UI 样式 + 缺少所需图像等的组合。
@Sennheiser 您提供的第一个链接现在已失效，项目页面似乎不再显示效果。无论如何，我在使用 jQuery 菜单时遇到了同样的问题，并意识到我使用的是过时的 CSS 文件。菜单小部件随 jQuery UI 1.9 一起提供，所以也许你应该检查你的项目是否有最新版本的 jQuery UI CSS 文件。这解决了箭头位置，但我仍然需要这里建议的修复来解决大小问题。

标签： jquery css jquery-ui

【解决方案1】：

是的。我不明白为什么这是 JQuery UI 中的默认设置。我认为没有人想要那么大的按钮。

这是我解决它的方法。将此添加到 html 文件的

中。

<style type="text/css">
    /* make default button size sane */
    .ui-button-text {
        font-size: .6em;
    }
</style>

【讨论】：

绝对是最简单的解决方案。完美运行！

【解决方案2】：

这是因为以下样式（style.css，第 10 行）：

#main {
    margin-top: 25px;
    text-align: center;
    font-size: 25px;
}

#main 中的字体非常大，因为 jQuery UI 正确地继承了其他样式，所以按钮也很大。

把上面的sn-p改成下面这样会更好看（至少是按钮）：

#main {
    margin-top: 25px;
    text-align: center;
    font-size: 10px;
}

【讨论】：

我试着弄乱它，但它永远不会接近这个样子：jqueryui.com/demos/button 我什至尝试取出我的所有样式表，它仍然看起来不像示例。
@Sennheiser 使用 Firebug（在 Firefox 中）或 Developer Tools（在 Google Chrome 中）检查哪些样式应用于按钮并以这种方式调查问题。按钮大小的问题可以通过我上面提供的修复程序轻松解决。如果您有任何其他问题，请告诉我。
Tadeck - 我的问题是，即使没有任何自定义样式，按钮的显示效果也与 jQuery UI 网站上的不同。
@Sennheiser jQuery ui 网站将正文中的字体大小设置为 10px，就像 Tadeck 建议的那样。如果您在主 div 中将 font-size 设置为 10px，您的 jQuery ui 元素将与它们在 UI 网站上的外观完全相同。
@Sennheiser 存在差异，因为：1）您有非标准主题（如 CSS 文件中所述，您的主题可用 under that link），2）您缺少至少 6 张所需的图片根据 CSS 显示它（使用开发人员工具或 Firebug 来确定它们或将您拥有的文件复制到 /css/images）。有帮助吗？

【解决方案3】：

我发现在那里的 UI 页面中有这个 css 代码：

身体{ 字体大小：62.5%； }

所以他们正在大幅缩小字体大小。将它放在您的页面中可以解决问题，它对我有用。

【讨论】：

大部分 ThemeRoller 主题都这样做是为了能够进行转换：1em = 10pxforum.jquery.com/topic/adjust-button-size#14737000000744502

【解决方案4】：

控制大小的两个css规则是

jquery-ui.css 的第 424 行

input.ui-button {
    padding: .4em 1em;
}

和jquery-ui.css的第59行

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

调整填充和字体大小，直到它看起来像你想要的样子。

【讨论】：

【解决方案5】：

删除 ui-widget 类。

我认为模式是

<div class="ui-widget">
    <div class="ui-widget-header">
    </div>

    <div class="ui-widget-content">
    //your button could go here 
        <div class="ui-button">click me</div>
    </div>
</div>

【讨论】：

【解决方案6】：

我只是偶然发现了这个，但尝试将 DOCTYPE html 添加到您的文档中

<!DOCTYPE html>
<html>
    <body>
    </body>
</html>

在您的开始 html 标记之前。

【讨论】：

【解决方案7】：

@Tadeck 我遇到了类似的问题，更改字体大小就可以了 :) 谢谢！

另外，在我阅读本文之前，我试图查看更改内部内容的字体大小是否有效，但由于我在下面描述的原因，它没有。（所以不要做我做的事！=P）

调用 jquery tabs 函数来制作标签的脚本

$(function() {
    $("#tabs").tabs();
});

标记构建选项卡所需的脚本

<div id="content-wrapper">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-main">Dashboard</a></li>
      <li><a href="#tabs-stuff"> Other Stuff </a></li>
    </ul>
    <div id="tabs-main"> 
       <!-- where i put unformatted content, like headers and description paragraphs -->
       <div> formatted inner content here (for graphs/visual content/tables/etc) </div>
    </div>
    <div id="tabs-stuff"> 
       <!-- where i put unformatted content, like headers and description paragraphs -->
       <div> formatted inner content here (for graphs/visual content/tables/etc) </div>
    </div>
 </div>
</div>

结果表明，在每个选项卡 div 中为 div 设置内联样式不会改变选项卡的大小。我必须更改从我滚动的 jQuery UI 主题生成的 css 文件中 .ui-widget 类的字体大小。并且实际上没有必要更改 UI 的样式表，因为您可以在下载自定义主题之前在网站上为 jQuery 主题滚轮设置字体大小。我只是忘了这样做。我会把它归结为我更愚蠢的时刻之一。

[edit] 这显然不是针对 UI 按钮，但也适用类似的概念和问题

【讨论】：

【解决方案8】：

我遇到了这个问题。我的微调器控件很丑，很大，而且水平放置而不是垂直堆叠...

我查看了我的主 html 文件（实际上是一个 razor MVC 布局文件）并注意到我需要包含 /themes/base/jquery.ui.spinner.css强>

现在我的微调器看起来很棒！

【讨论】：

【解决方案9】：

我尝试了所有其他答案，但似乎没有一个能正常工作。有些没有改变任何东西，有些则有不利的副作用（例如缩小所有内容）。

这终于成功了：

.ui-widget
{
	font-size: 75%;
}

【讨论】：