Chrome과 Firefox에서 렌더링되는 텍스트 컨테이너 너비 크기가 다릅니다.

Question

Chrome과 Firefox에서 컨테이너 너비가 다른 크기로 렌더링되는 이유는 무엇입니까? 이미지 샘플. Chrome: 렌더링 너비는 681.273

FireFox: 렌더링 너비는 685.8499입니다.

으아아아 으아아아

두 브라우저에서 다음 링크를 열면 차이점을 확인할 수 있습니다.

이것은 jsfiddle입니다

두 브라우저에서 동일한 너비로 렌더링하는 방법이 있나요?

Answer 1

문제 원인:

• 다른 기본 스타일: Chrome과 Firefox는 HTML 요소에 대해 서로 다른 기본 스타일을 가지고 있습니다.
• 두 브라우저가 CSS를 처리하는 방식에는 차이가 있습니다: 둘 다 자체 렌더링 엔진을 가지고 있으므로 CSS 속성을 다르게 처리할 수 있습니다.

문제 해결 방법

• CSS 사용 reset: CSS 재설정은 브라우저의 기본 스타일인 CSS 재설정이란 무엇입니까를 제거하는 스타일 세트입니다.

• CSS 공급업체 접두사 사용: CSS 속성이 해당 브라우저를 지원하도록 만드는 데 사용되는 CSS 속성에 대한 접두사입니다. CSS 공급업체 접두사