（为什么）jQuery让我的滑块看起来很胖吗？_Jquery_Jquery Ui

（为什么）jQuery让我的滑块看起来很胖吗？

jquery jquery-ui

（为什么）jQuery让我的滑块看起来很胖吗？,jquery,jquery-ui,Jquery,Jquery Ui,我正在自学jQuery，并使用一个滑块控件开始jqueryui。我已经把它连接好了，在功能上它工作得很好，当我滑动手柄时设置了一些全局页面变量。但是，它看起来不像jQueryUI演示页面上的滑块这是一个水平滑块，我可以通过设置jQueryUI转换为滑块的CSS宽度属性来控制条的长度。但该条比演示页面上的条“厚”两到三倍，滑块手柄也相应地大。它看起来不错，但没有演示页面上的好以width设置为提示，我尝试设置底层的CSS height属性。这改变了酒吧的高度部分，但不是处理现在看起来超大以下

我正在自学jQuery，并使用一个滑块控件开始jqueryui。我已经把它连接好了，在功能上它工作得很好，当我滑动手柄时设置了一些全局页面变量。但是，它看起来不像jQueryUI演示页面上的滑块

这是一个水平滑块，我可以通过设置jQueryUI转换为滑块的CSS宽度属性来控制条的长度。但该条比演示页面上的条“厚”两到三倍，滑块手柄也相应地大。它看起来不错，但没有演示页面上的好

以width设置为提示，我尝试设置底层的CSS height属性。这改变了酒吧的高度部分，但不是处理现在看起来超大

以下是标题：

<head>
    <title>The Memory Game</title>
    <link href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
    <link href="css/memoryGame.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script src="js/memoryGame.js" type="text/javascript"></script>
</head>

下面是我应用滑块的jQuery：

$('#slider').slider({
    max: 10000,
    value: waitTime,
    change: function(event, ui) {
        waitTime = ui.value;
        fadeTime = waitTime / 3;
    }
});

有人能建议我如何缩放滑块的厚度，或者至少获得jquery ui演示页面上显示的相同厚度吗？

所有jquery ui小部件都与之关联。slider小部件的说明提到了分配给slider句柄的某些CSS类

查看jquery-ui.css（或者ui.slider.css，如果您使用的是开发包），您可以看到默认的css类似于：

.ui-slider .ui-slider-handle {
  width: 1.2em;
  height: 1.2em;
}
.ui-slider-horizontal .ui-slider-handle { 
  top: -0.3em;
  margin-left: -0.6em;
}

您可以重写这些CSS规则来创建任意大小的句柄

编辑我已经在这里生成了基本的滑块功能：（可编辑通过）。请尝试在上重现您的问题，并与我们共享公共链接

完整资料来源：

<!doctype html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
  <title>http://stackoverflow.com/questions/1616675</title>
  <style type="text/css" media="screen">
    html, body, #content { height: 100%; }
    body { background-color: #000; font-size: 62.5%; color: #fff; }
    #content { width: 700px; margin: 0 auto; border: 1px solid white; padding: 1em;}
    #slider { width: 200px; }
  </style>
</head>
<body>
  <div id="content">
    <div id="slider"></div>
  </div>
  <script>
    $('#slider').slider();
  </script>
</body>


http://stackoverflow.com/questions/1616675
html，正文，#内容{高度：100%；}
正文{背景色：#000；字体大小：62.5%；颜色：#fff；}
#内容{宽度：700px；边距：0自动；边框：1px纯白；填充：1em；}
#滑块{宽度：200px；}
$（“#滑块”）.slider（）；

滑块大小由“字体大小”css属性控制。您希望减小父元素的字体大小。

可能是因为您的CSS不一致。没有人知道您是如何实现代码的，所以请提供：）没什么特别的，我只是从jquery ui演示和文档页面复制演示代码。我已经在上面的问题中添加了代码。PS@meder：如果你认为问题出在CSS上，我想我要问的是什么CSS属性或属性控制jquery ui中滑块控件的厚度？如果可以的话，你应该发布一个屏幕截图（或链接）。@Nathan，我正在本地开发，但会尝试将项目放到服务器上。jQueryUI页面是，我看到的效果基本上是一样的，但是我的滑块比上面显示的要厚。快告诉我吧。我的手机上没有现成的源代码哈哈，你回答了那么多电话里的问题！？那是个坏蛋：汉克斯·布莱恩，这是一个帮助。但是，我最近下载了jquery ui Themebuilder css文件，并在页面上包含了其中一个主题。当我在themebuilder网站上看到这个主题时（这个主题叫做平滑度，URL太长，无法剪切和粘贴），滑块看起来“正确”。知道为什么在我的机器上会有所不同吗？如果您从下载jQuery UI，zip文件中应该包含index.html。在浏览器中打开该文件时，滑块看起来是否不同（“不正确”？如果没有，那么代码中有一些东西（您没有向我们展示）会干扰CSS。不，jquery-ui-index.html页面上的滑块看起来“正确”。当我检查firebug中的“我的”滑块时，它似乎有jquery应用的正确类，这些类位于jquery ui css文件中。谢谢，这完全正确。将字体大小减少到62.5%（上面Brian例子中的数字）产生了与jQueryUI演示相匹配的效果。对于我自己的教育，你能解释一下字体大小指令影响滑块高度的CSS机制吗？+1 Jourkey是正确的，父元素中设置的

font-size

属性确实会影响滑块的大小。这是因为

jqueryui.css

中的默认规则使用

em

单元来定义滑块尺寸。由于

em

单位相对于父元素的单位，因此更改

正文中的字体大小将更改滑块的尺寸。然而，一个更合适的修复方法是，如我在回答中所述，为滑块显式定义新的CSS规则，而不是更改正文
中的字体大小，因为这会影响整个页面。@Brian，@Jourkey感谢这两种方法@Brian，我认为覆盖jQueryUI提供的样式需要一段时间（至少还要几个小时）才能感觉舒服。这对我来说是一个学习项目（毫无疑问，你可以告诉我），这个问题是一个很大的成功，因为我学到了很多。谢谢你的帮助。
.ui-slider .ui-slider-handle {
  width: 1.2em;
  height: 1.2em;
}
.ui-slider-horizontal .ui-slider-handle { 
  top: -0.3em;
  margin-left: -0.6em;
}

<!doctype html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
  <title>http://stackoverflow.com/questions/1616675</title>
  <style type="text/css" media="screen">
    html, body, #content { height: 100%; }
    body { background-color: #000; font-size: 62.5%; color: #fff; }
    #content { width: 700px; margin: 0 auto; border: 1px solid white; padding: 1em;}
    #slider { width: 200px; }
  </style>
</head>
<body>
  <div id="content">
    <div id="slider"></div>
  </div>
  <script>
    $('#slider').slider();
  </script>
</body>