모든 브라우저에서 동일한 여백을 렌더링하는 방법은 무엇입니까?

Question

일부 점을 그렸던 HTML5 캔버스 이미지가 있으며 일부 div 태그와 텍스트 입력 태그를 점 옆에 정렬하려고합니다.

불행히도 브라우저는 각 div 태그와 입력 태그 사이의 공백에 동의하지 않습니다.

CSS로 높이를 지정하여 입력 태그의 해킹을 발견했습니다. 이제 입력 태그는 모든 브라우저에 대해 동일한 공간을 갖습니다. 입력 태그의 기본 높이가 브라우저에 따라 다르다는 것을 알 수 있습니다. 매우 이상합니다.

div 태그에 동일한 작업을 시도했지만 모든 브라우저에서 올바른 정렬을 얻을 수 없습니다. http://jsfiddle.net/baptx/92gPY/

나는 파이어 폭스를 사용하고 있습니다 : 정렬 (파이어 폭스 용으로 구성) 브라우저에 따라 동일하지 않습니다 http://jsfiddle.net/baptx/XcKZj/

div 태그 :

텍스트 입력 태그 정렬 CSS 해킹과 모든 브라우저에서 작동 Linux에서는 Windows 버전이 동일한 여백을 렌더링하지 않는 것으로 나타났습니다. Linux 또는 Windows에서 실행될 때 Chrome이 Linux Firefox에도 동의하지 않습니다. Opera는 훌륭합니다. Linux 또는 Windows에서 실행되는 Linux Firefox에 항상 동의합니다.

웹 브라우저 엔진, Gecko 렌더링 방식이 Webkit과 다르게 생각되었지만 Windows와 Linux 버전의 Firefox가 일치하지 않으면 다른 것이되어야합니다.

div 태그를 사용하여 문제를 해결할 수있는 방법과 아이디어가 있습니까?

Answer 1

이유 : 규정 된 스타일 시트가 여백과 같은 간격을 지정하지 않았기 때문입니다.

솔루션 : CSS 재설정 스타일 시트를 사용하고 사이트 전체 스타일 시트에 자신의 기본값을 명시 적으로 선언하십시오.

는 여기에 몇 가지 리셋을 가진 웹 사이트 : 당신은 당신의 스타일에 리셋 CSS를 포함 할 필요가 같은 http://www.cssreset.com/

Answer 2

그것은 소리. 이렇게하면 브라우저 간의 차이를 통합 (완전히 제거하지는 않음)하는 데 도움이됩니다.

다음은 두 개의 인기 재설정 있습니다 : 왜

Eric Meyer's reset

YUI Reset