jQuery 기반 드롭 다운은 Firefox 외부의 갭을 보여줍니다.

Question

저는 매우 간단한 자동 완성 드롭 다운 위젯을 jQuery에 만들었습니다.이 도구는 input 요소에 적용 할 수 있습니다. 그것은 훌륭하지만, 어떤 이유로 든 드롭 다운 목록은 input과 Firefox 이외의 브라우저 (IE, Safari 및 Chrome에서 테스트 됨)의 목록 사이에 간격을 표시합니다.

jsFiddle에 나는 이것을 조롱 해 모든 브라우저에서 정상적으로 작동한다는 것을 알았습니다. 문제는 "정상화 된 CSS"옵션이 해제 될 때까지였습니다. 그런 다음 IE에서 간격이 다시 나타 났지만 Firefox에서는 여전히 잘 작동합니다. 여기에 스크린 샷입니다 :

이 명확 따라서 CSS 문제입니다. 그러나 나는 문제가있는 곳에서 일하는 삶을 살 수 없다. 나는 jsFiddle의 모습을 보았고 거기에서 몇 가지를 시도했다. (대부분 padding과 다양한 선택자의 여백을 0px로 설정했다.) 그러나 나는 그것을 얻을 수 없다! 모든 CSS에서 간격이 사라지도록 CSS를 어떻게 바꿀 수 있습니까?

Answer 1

div.popup ul의 위쪽 여백을 0px로 설정하여 간단히 간격을 없앨 수있었습니다.

div.popup ul { 
list-style: none; 
background: red; 
padding: 0px; 
margin-top: 0px; 
}