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

我正在使用一种工具来预览网站上的字体。对于这个工具，我想使用<input type="range" />来改变textarea中的字体大小。由于我不喜欢滑块和处理程序的默认WebKit渲染，因此我使用CSS对它们进行了自定义。虽然页面在Safari中呈现良好，但Chrome不显示滑块句柄（但其他网站上的滑块仍可呈现）。为了使它在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 render differences safari and chrome

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

来源

2011-05-16 snorpey

我在Firebug中得到错误“Modernizr未定义”。 FF4显示了一个我无法与之互动的3px行，Chrome只显示一行，而IE8对整个页面没有任何影响。它只适用于我的Safari，（相当不错）。 – 2011-05-16 03:45:07

感谢您检查Firefox和IE。两个浏览器都不支持''。 Modernizr应该现在工作。 – snorpey 2011-05-17 00:55:46

只是看看你的网站，好像你现在修好了吗？ – 2011-05-23 09:39:46

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

来源

2011-05-16 10:27:06

感谢您的测试。你使用的是哪个版本的Chrome？更改选择器对我无效（我在Chrome 11.0.696.68上）... – snorpey 2011-05-17 00:59:32

我使用的是相同版本的Chrome。看看[这里]（http://jsfiddle.net/Gary/MgXYk/）。你应该能够看到它的工作？ – 2011-05-17 07:40:25

感谢您在jsfiddle上发布的代码片段。这对我来说可以。我刚刚使用您的代码更新了现场示例。它仍然不显示滑块手柄。你有什么想法哪个CSS规则可能导致这个问题？ – snorpey 2011-05-23 00:02:21

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

回答

相关问题