輸入範圍處理程序不會在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中呈現

回答

相關問題