2012-01-31 3 views
0

나는 CSS 그라디언트와 패딩을 사용하여 앵커 태그 주변의 버튼을 시뮬레이션합니다. 내가 겪고있는 문제는 파이어 폭스가 버튼을 3 픽셀 더 크게 만드는 것 같다. 상단에 1 픽셀, 하단에 2 픽셀. 이것은 게시 된 예제뿐만 아니라 어디에서나 패딩을 사용하는 페이지에서 발생하는 것 같습니다. 나는 http://wemw.net/example.php에 예와 예를 올려 놓았다. 파이어 폭스에서 버튼 상단과 하단은 검색 창과 완벽하게 일치하지만 크롬에서는 상단에 1 픽셀, 하단에 2 픽셀 씩 떨어져 있습니다. 나는 w3 transitional (엄격한 시도) doctype과 css reset을 사용하고있다. 재설정시 모든 앵커 태그는 패딩 : 0으로 설정되므로이 여분의 패딩이 추가되는 이유에 대해 혼란 스럽습니다. 이 문제를 해결하는 방법이 있습니까? 아니면 게코 및 웹킷 브라우저를 사용할 때 처리해야 할 부분입니까?css 패딩 호환성 firefox 9 chromium 15

편집 : 그래서 창문에 로그온하고 두 브라우저에서 모두 동일하게 나타납니다. OS 별 문제라고 가정하고 있습니까? 많은 사람들이 리눅스를 사용하는 곳에서 리눅스를 사용하기 때문에 패딩을 바꿔서 작동시키지 만, 일관성을 위해 크로스 - 크로스 브라우저 솔루션을위한 해결책을 누군가가 제공 할 수 있습니까? 나는 Mac을 소유하고 있지 않으며 쉽게 테스트 할 수는 없지만 Windows/Linux가 동일한 브라우저의 동일한 버전에 문제가있을 수 있다면 Mac은 문제가있을 수 있다고 생각하는 것이 안전할까요?

답변

0

앵커 태그의 패딩이 아니라 일관성이없는 텍스트 상자의 크기입니다. <input> 요소는 항상 나에게도 이와 같은 문제를 일으켰으며, 나는 항상 IE8에서 본 적이 없다는 것을 항상 지루하게 생각했다. 가장 쉬운 크로스 브라우저 솔루션은 여기서는 텍스트 상자에서 테두리를 제거하고 단추 대신 제대로 배치 된 배경 이미지 (또는 더 좋지만 텍스트 상자가 포함 된 요소의 배경 이미지)를 사용하는 것입니다.