크롬에서 입력 유형 = '범위'의 정렬 문제가 발생했습니다 (웹킷)

Question

크롬의 스타일 입력 범위 슬라이더에 약간의 정렬 문제가 있습니다. 그것은 Firefox에서 잘 작동합니다.

여기는 fiddle입니다.

HTML은 :

<div class='container'> 
    <div class='box'></div> 
    <input type='range' class='range'/> 
</div> 

나는 참조 왼쪽에있는 상자를 주었다. Firefox에서 입력 컨트롤은 박스에 대해 중앙에서 수직으로 정렬되고 chrome에서는 상단에 정렬됩니다.

CSS : 나는 웹킷에 대한 마진 탑을 추가했지만,이 업데이트 fiddle 같이 그 위에 흰색 패치를주고있다

.container { 
    height: 80px; 
    width: 220px; 
    background-color: green; 
    overflow: auto; 
    padding: 10px; 
} 

.box { 
    height: 20px; 
    width: 20px; 
    float: left; 
    background-color: blue; 
    margin-right: 5px; 
} 

input { 
    float: left; 
} 

input[type=range]::-webkit-slider-runnable-track { 
    -webkit-appearance: none; 
    width: 100%; 
    height: 7px; 
    cursor: pointer; 
    background: #b4b4b4; 

} 

input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    width: 8px; 
    height: 20px; 
    cursor: pointer; 
    background: #f0f0f0; 
    margin-top: -6px; 
} 

input[type=range]::-moz-range-track { 
    width: 100%; 
    height: 7px; 
    cursor: pointer; 
    background: #b4b4b4; 
} 

input[type=range]::-moz-range-thumb { 
    height: 20px; 
    width: 8px; 
    cursor: pointer; 
    background: #f0f0f0; 
} 

. 이유를 모르겠다.

input[type=range]::-webkit-slider-runnable-track { 
    margin-top: 6px; 
} 

더 좋은 아이디어가 있습니까?

Answer 1

그냥 당신이 CSS를 추가 입력에서 부동의 속성을 제거 :

input { 
    float: left; 
} 

그리고 크롬과 파이어 폭스에 모두 잘 작동합니다.