입력 범위 처리기가 Chrome에서 렌더링되지 않습니다.

웹 사이트에서 글꼴을 미리보기 도구로 작업하고 있습니다. 이 도구의 경우 텍스트 영역의 글꼴 크기를 변경하려면 <input type="range" />을 사용하고 싶습니다. 슬라이더와 핸들러의 기본 WebKit 렌더링이 마음에 들지 않으므로 CSS를 사용하여 사용자 지정했습니다. Safari에서는 페이지가 잘 렌더링되지만 Chrome은 슬라이더 핸들을 표시하지 않습니다 (다른 웹 사이트의 슬라이더는 괜찮습니다). Chrome에서도 작동하도록하려면 무엇을 변경해야합니까?입력 범위 처리기가 Chrome에서 렌더링되지 않습니다.

html로

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

현재 라이브 예를 찾을 수 있습니다

.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; 
}

CSS의 : http://fishnation.de/development/26plus/#test-font render differences safari and chrome

P.S.을 jQuery UI가 있다는 것을 알고 있지만, 가능한 한 적은 요소로 대체하려고합니다.

출처

2011-05-16 snorpey

Firebug에서 "Modernizr is not defined"오류가 발생합니다. FF4는 상호 작용할 수없는 3 픽셀 줄을 표시하고 Chrome은 줄을 표시하며 IE8은 전체 페이지에 아무 것도 표시하지 않습니다. 그것은 나를 위해 사파리에서만 작동합니다 (그리고 꽤 멋지게). –

Firefox 및 IE를 확인해 주셔서 감사합니다. 두 브라우저는 아직 '을 지원하지 않습니다. 모더니 저는 지금 일해야합니다. – snorpey

귀하의 사이트를 한번 살펴 보았습니다. 귀하가 지금 고쳐 주신 것처럼 보입니까? –

선택기를 변경해보십시오. 나는 #font-1-size::-webkit-slider-thumb을 사용했습니다. 이것은 크롬에서 잘 작동했습니다.

출처

2011-05-16 10:27:06

테스트 해 주셔서 감사합니다. 사용중인 Chrome 버전은 무엇입니까? 선택기를 변경해도 작동하지 않았습니다. (Chrome 11.0.696.68) ... – snorpey

동일한 버전의 Chrome을 사용하고 있습니다. 보십시오 [여기] (http://jsfiddle.net/Gary/MgXYk/). 당신은 그것이 작동하는 것을 볼 수 있어야합니까? –

jsfiddle에 게시 한 코드 스 니펫을 보내 주셔서 감사합니다. 그것은 나를 위해 잘 작동합니다. 방금 코드를 사용하여 라이브 예제를 업데이트했습니다. 여전히 슬라이더 핸들을 표시하지 않습니다. CSS 규칙으로 인해이 문제가 발생할 수 있다는 아이디어가 있습니까? – snorpey

입력 범위 처리기가 Chrome에서 렌더링되지 않습니다.

답변

관련 문제