파이어 폭스 -

Question

여기 시연 내 상황과 함께 jsFiddle있어 텍스트 스크롤 HTML 텍스트 입력에 : http://jsfiddle.net/SFrbZ/4/

는 기본적으로, 나는 테이블 셀에 입력 필드를 가지고 고정 높이와 글꼴 크기로 설정 입력을 갖고 싶어. 현재 사용자가 마우스를 가져 가거나 입력을 클릭 할 수 있고 마우스 휠을 사용하면 텍스트를 프레임에서 부분적으로 스크롤 할 수 있습니다. 텍스트를 강조 표시하면 텍스트를 위로 이동할 수 있습니다. 다음 코드뿐만 아니라이 문제의 베어 본을 보여줍니다

HTML :

<input class="scroll" type="text" value="1"></input> 

CSS : 이상하게

.scroll { 
display: table-cell; 
width: 38px; 
height: 8px; 
font-size: 11px; 
color: Black; 
font-family: Calibri; 
text-align: center; 
background-color: rgb(182, 231, 201); 
} 

, 이것은 단지 파이어 폭스로 발생하고 있지 크롬, IE, 또는 원정 여행. jsFiddle에서 볼 수 있듯이 필드의 높이를 높이거나 글꼴 크기를 낮추면 문제가 해결되지만 이것이 나에게 실용적인 해결책은 아닙니다.

수정을 시도했지만 건조 해 보았습니다. 오버플로, 선 높이, 패딩, 여백, 디스플레이 유형 등으로 혼란을 겪었으며 아무 것도 그 트릭을 수행하지 않은 것처럼 보였습니다. 모든 포인터 또는 제안은 크게 감사하겠습니다!

Answer 1

스크롤 이벤트에 대한 자바 스크립트 핸들러를 .scroll 클래스의 요소에 설치하는 것이 가장 좋습니다.이 이벤트는 단순히 이벤트를 삼켜 버리고 false를 반환합니다. 이는 요소가 어떤 방식 으로든 스크롤되는 것을 막아줍니다. 문제가 명시된대로. ,

$(document).ready(function() { 
    $('.scroll').scroll(function(e) { 
     e.preventDefault(); 
     return false; 
    }); 
}); 

jQuery를하지 않고,이 솔루션은 window.addEventListener &이 C,하지만 jQuery를가 너무 훨씬 간단하게에 의해 여전히 가능하다 : jQuery를 사용하여 This fiddle는 솔루션을 보여줍니다, 그리고 그것의 고기는 다음과 같다. 프로젝트에서 아직 해당 라이브러리를 사용하고 있지 않다면이 목적으로 만 추가하는 것이 좋습니다.

Answer 2

가장 쉬운 해결책은 높이와 일치하도록 .scroll CSS 클래스의 line-height 속성을 변경하는 것입니다. 예를 들면 다음과 같습니다.

.scroll { 
    display: table-cell; 
    width: 38px; 
    height: 8px; 

    line-height: 8px; 

    font-size: 11px; 
    color: Black; 
    font-family: Calibri; 
    text-align: center; 
    background-color: rgb(182, 231, 201); 
} 

문제는 텍스트가 기술적으로 해당 상자에 맞지 않는다는 것입니다. 높이가 11px 인 텍스트는 보통 여러 줄의 텍스트가 줄 사이에 간격을 갖도록 상단 및 하단에 '패딩'으로 몇 개의 픽셀을 가지고 있습니다. 결과적으로 텍스트가 맞는 것처럼 보이지만 사실은 아닙니다.