Firefox 특정 브라우저 용 CSS 패딩

내 응용 프로그램에 드롭 다운 목록이 있습니다. 센터링하기 위해 모질라 파이어 폭스에서 패딩 - 톱 10px를 추가해야하지만 Google 크롬에서는 패딩이 필요 없습니다. 선택 목록을 대상으로 특정 브라우저를 설정하려면 어떻게합니까? 나는 다음과 같은 것을 할 수 있기를 바랬다 :Firefox 특정 브라우저 용 CSS 패딩

select { 
    -moz-padding-top: 10px; 
    -webkit-padding-top: 0px; 
}

나는 이것을 어떻게 얻을 수 있었는지에 대한 아이디어가 있습니까? Chrome에서이를 확인하면 문제의 바이올린은, 아래 그림과 텍스트가 질문에 대한 중간

http://jsfiddle.net/uHDa6/

출처

2013-10-24 Jay

패딩은 보편적입니다. P ... 파이어 폭스에서는 필요하지만 크롬에는 필요하지 않은 경우 다른 요소 또는 속성과 함께 문제가 발생합니다. – DaniP

덧글 – Jay

+1에 문제가 추가되었습니다. 나는 도전을 좋아한다. 하지만 다음 번에 _problem_ (즉, firefox는 수직 방향이 다르게 정렬되고 'vertical-align'은 아무 것도하지 않습니다.)을 설명하고, 어떻게 해킹하려고하는지 설명하십시오. –

대답 항상 그래서 파이어 폭스, 내가 원하는 : 예, 그것은 Mozilla- 넣어 가능 스타일 시트의 특정 CSS. (아니 인라인 스타일 속성.에)이 경우
, 당신은 단순히 @document 규칙의 모질라 접두사 버전입니다

@-moz-document url-prefix() { 
    select {padding-top:10px;} 
}

을 작성, 그 다른 브라우저에서 인식되지 않습니다.

그러나 텍스트 위치가 일치하지 않는 문제에 대한 실제 해결책은 높이를 설정하지 않고 선택 영역 만 패딩하는 것입니다. 해킹 안돼.

style="font-size: 14px; padding: 11px 0 11px 5px;"

모든 브라우저에서 원하는 효과가 있습니다. new fiddle을 참조하십시오.

출처

2013-10-25 07:53:51

감사합니다. Mr Lister 패딩만으로도 문제를 해결할 수있었습니다.하지만 높이가 높아지면서 기분이 상했다. – Jay

이것은 정확히 비슷한 문제를 해결하는 데 필요한 것입니다. Firefox는 Chrome과 IE보다 약간 좁은 Arial 글꼴을 표시하므로 적절한 메뉴 항목 너비를 유지하기 위해 Firefox에 사용자 정의 패딩을 추가해야했습니다. 이것은 트릭을했다. 감사! – DiMono

Firefox 특정 브라우저 용 CSS 패딩

답변

관련 문제