크롬과 다른 모든 브라우저 사이의 2px 차이 'outerHeight()`

Question

개발중인 양식 플러그인의 일부인이 맞춤식 선택 메뉴에서 작업하고 있습니다. 내 CSS에서

나는 이런 식으로 뭔가를했습니다 :

.qval-select span { 
    font-size: 15px; 
    display: block; 
    padding: .3em .8em; 
    cursor: pointer; 
} 

span 사용자 정의 선택 메뉴에서 항목입니다.

어느 시점에서 나는 해당 항목의 outerHeight()을 알아야하고 계산을해야합니다. 내가 겪고있는 문제는 Chrome이 높이가 25px이고 모든 다른 브라우저 (IE8, IE9, Firefox)가 27px이라고보고한다는 것입니다. 재미있는 점은 크롬 만 내가 원하는 번호를 얻고있는 것 같습니다.

http://spacirdesigns.com/idealforms/ :

가 무슨 뜻인지 확인하려면 여기 예를 업로드했습니다.

사용자 지정 선택 메뉴를 열고 위쪽 및 아래쪽 화살표로 스크롤 할 때 문제가 있음을 알 수 있습니다. 보시다시피, Chrome을 제외한 모든 브라우저는 2 개의 추가 픽셀을 계산하여 모든 것을 망칠 것입니다.
콘솔을 열면 높이의 로그를보고 다른 브라우저와 비교할 수 있습니다.

span에 대해 높이를 설정하면 사용자 정의 선택의 아름다움은 많은 크기에 적응할 수 있으므로 em이 필요합니다. 나는 또한 글꼴을 em으로 설정하고 글꼴을 변경하려고했지만 아무 것도하지 않았다.

누군가 여기서 무슨 일이 일어나고 있는지, 왜 말해 줄 수 있습니까? 그것은 나를 미치게합니다.

scrollToItem: function() { 
    // Select.sub.scrollTop(0); 
    var idx = Select.items.find('.selected').parent().index(), 
     height = Select.items.outerHeight(), 
     items = Select.items.length, 
     allHeight = height * items, 
     curHeight = height * (items - idx); 
    console.log(height); 
    Select.sub.scrollTop(allHeight - curHeight); 
}, 

Answer 1

EM은 브라우저를 기반으로하기 때문입니다. 어떻게 든 변화를 설명하는 것을 제외하고는이 문제를 해결할 방법이 없습니다.

크롬은 .3 EM = 5px, 다른 브라우저는 6px라고 말합니다. 높이를 크게하는 패딩입니다. 패딩이 EM에 있으면 높이가 달라집니다.