0
"범위"유형의 입력 스타일을 지정하여 여러 브라우저에서 동일하게 보이도록하려고합니다.스타일 입력 유형 범위, 각기 다른 브라우저의 높이 차이
내가 사용한 몇 가지 참신한 자원을 발견했습니다...
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
http://danielstern.ca/range.css/#/
http://www.cssportal.com/style-input-range/
...하지만하지 않는 것 하나 문제가있다 해결되어야한다. 즉, Firefox와 다른 브라우저는 입력의 높이를 트랙과 엄지 손가락의 높이 (또는 비슷한 값)로 간주하지만 크롬은 트랙의 높이를 트랙의 높이라고 생각하는 것처럼 보입니다. 전체 입력. 당신은 크롬과 파이어 폭스에서 이것을 실행하면.container {
border: 1px solid red;
background-color: lightgreen;
margin-top: 10px;
}
p {
border: 1px solid blue;
margin: 0;
padding: 0;
}
input[type=text],
input[type=range] {
-webkit-appearance: none;
width: 200px;
margin: 0;
padding: 0;
display: block;
height: 50px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
animate: 0.2s;
background: #ccc;
border: 1px solid #333;
}
input[type=range]::-webkit-slider-thumb {
border: 1px solid #333;
height: 30px;
width: 8px;
background: #fff;
-webkit-appearance: none;
margin-top: -7px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 4px;
cursor: pointer;
animate: 0.2s;
background: #ccc;
border: 1px solid #333;
}
input[type=range]::-moz-range-thumb {
border: 1px solid #333;
height: 30px;
width: 6px;
background: #fff;
}<div class="container">
<p>
Some text...
</p>
<input type="range" />
<p>
Some more text...
</p>
</div>
<div class="container">
<input type="text">
</div>당신이 두 개의 브라우저가 다른이를 치료하는 것을 볼 수 있습니다 :
이
은 (응축) 내 코드입니다. 크롬에서는 입력이 흰색 배경이됩니다.input[type=range]에서 height: 50px;을 제거하면 브라우저가 높이를 처리하는 방식에도 분명히 차이가 있습니다.
위에서 볼 수 있듯이 이것은 범위 입력의 위와 뒤의 태그가 상대적으로 어떻게 배치되는지에 영향을줍니다.
어떻게 해결할 수 있습니까?
두 번째 입력 필드 (type = text)가 비교를 위해 존재합니다. – Winter
이 내용은 https://jsfiddle.net/UserIsMonica/k5ezwsey/3/에서 확인할 수 있습니다. 이 CSS 지원 : Firefox 23 이상, Safari 4 이상, iOS 5 이상, Chrome 6 이상, Opera 11 이상, IE 10 이상, Android 4.2 이상 참조 : https://css-tricks.com/styling-cross-browser-compatible -range-inputs-css/ – monikapatel
@Monica Hm, 당신이 한 것은 높이를 제거하고 대신 여백을 추가하는 것입니까? 이 마지막 시간을 보았을 때 나는 높이를 사용했을 때와 같은 흰색 배경을 가지고있었습니다 ... 그 시간을 놓친 뭔가 였을 것입니다. – Winter