输入范围处理程序不会在 Chrome 中呈现答案

【问题标题】：Input range handler doesn't render in Chrome输入范围处理程序不会在 Chrome 中呈现
【发布时间】：2011-05-17 08:50:42
【问题描述】：

我正在开发一种用于在网站上预览字体的工具。对于这个工具，我想使用<input type="range" /> 来更改文本区域中的字体大小。由于我不喜欢滑块和处理程序的默认 WebKit 渲染，因此我使用 CSS 自定义了它们。虽然页面在 Safari 中呈现良好，但 Chrome 不显示滑块句柄（但其他网站上的滑块呈现良好）。我必须进行哪些更改才能使其在 Chrome 中也能正常工作？

HTML

<input type="range" min="6" max="70" value="22" id="font-1-size" />

CSS

.tester-option.font-size input
{
    -webkit-appearance: none !important;
    background: #cecece;
    height: 1px;
    width: 425px;
    -webkit-transform: translate3d(0px, 0px, 0px);
    margin-top: 10px;
    cursor: pointer;
}

.tester-option.font-size input::-webkit-slider-thumb
{
    -webkit-appearance: none !important;
    background: #666;
    height: 10px;
    width: 10px;
    cursor: pointer;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

您可以在此处找到实时示例：http://fishnation.de/development/26plus/#test-font

附：我知道有 jQuery UI，但我想替换尽可能少的元素。

【问题讨论】：

我在 Firebug 中收到错误“Modernizr is not defined”。 FF4 显示一条我无法交互的 3px 线，Chrome 只显示一条线，而 IE8 整个页面什么都没有。它只适用于我的 Safari，（而且非常好）。
感谢您使用 Firefox 和 IE。两种浏览器尚不支持<input type="range">。 Modernizr 现在应该可以工作了。
刚刚查看了您的网站，现在好像已经修复了？
是的。非常感谢您帮助我！

标签： css html google-chrome safari webkit

【解决方案1】：

尝试更改您的选择器。我用#font-1-size::-webkit-slider-thumb。这在 chrome 中运行良好。

【讨论】：

感谢测试。您使用的是哪个版本的 Chrome？更改选择器对我不起作用（我使用的是 Chrome 11.0.696.68）...
我使用的是同一版本的 Chrome。看看here。你应该能看到它工作了吗？
感谢您在 jsfiddle 上发布的代码 sn-p。这对我来说可以。我刚刚使用您的代码更新了实时示例。它仍然没有显示滑块句柄。您知道哪个 CSS 规则会导致此问题吗？