Firefox와 Chrome에서 jquery UI 버튼이 달라 보이는 이유

이 페이지에는 jquery UI 단추가 하나만 있습니다.

왜이 모양이 파이어 폭스에서 조금 크게 보입니까? 여백과 글꼴 크기가 모두 크게 보입니다. 크롬이 잘 보입니다.

두 브라우저 모두 동일한 크기 (패딩, 글꼴 등)로 만들 수있는 방법은 무엇입니까?

2012-04-12 shashwat

은 나에게 똑같이 보입니다. 테스트를 거친 브라우저 버전? –

FF 및 Chrome 버전? – codef0rmer

@ codef0rmer FF 11.0 및 Chrome 19.0.1055.1 – shashwat

제 생각에 그것은 <input> 요소의 일관성없는 렌더링입니다. 렌더링이 각 브라우저간에 일치하지 않으며 높이가 2 픽셀 차이가 나는지 확인할 수 있습니다.

<button> 요소를 대신 사용할 수있는 경우 패딩을 직접 조정해야하지만 브라우저에서 브라우저로 일관되게 렌더링됩니다.

그렇다면 기본값을 사용하는 대신 관련 스타일을 명시 적으로 설정해야합니다. 여기에는 줄 높이, 채우기, 글꼴 크기, 테두리 너비 등이 포함됩니다. 모든 브라우저에는 자체 기본값이 있습니다. 일관성을 유지하려면 기본값을 대체하는 CSS를 제공해야합니다.

2012-04-12 11:08:55 daveyfaherty

FF에서이 모양이 더 커 보이지 않습니까 ?? ?? @ 엘리 란은 그를 똑같이 본다고 말했다. 나는 이미 패딩 조정을 시도했지만 고정되지 않았습니다. FF가 여전히 더 큽니다. – shashwat

FF로 2 픽셀, 7 픽셀로 넓습니다. – daveyfaherty

그래서이 솔루션은 무엇입니까 ?? 파이어 폭스처럼 보입니다. – shashwat

기본값을 명시 적으로 설정하여이 문제를 해결했습니다.
Ex. 나는 input.navigation_button 패딩을 가진 CSS 클래스를 만들었습니다 : 2px (크롬은 제 단추에 제로 패딩을 가졌습니다).

2012-04-20 19:23:10

답변