사용자 에이전트 스타일 시트의 역할 이해

Question

Google Chrome에서 페이지 작업을 하고 있습니다. 다음 스타일을 올바르게 표시합니다.

테이블 {
    디스플레이: 테이블;
    국경 붕괴: 분리;
    테두리 간격: 2px;
    테두리 색상: 회색;
}

이러한 스타일은 제가 정의하지 않았습니다. Chrome 개발자 도구에서는 CSS 파일 이름을 사용자 에이전트 스타일시트로 바꿉니다.

이제 양식을 제출했는데 일부 유효성 검사 오류가 발생하면 다음과 같은 스타일시트가 표시됩니다.

테이블 {
    공백: 정상;
    줄 높이: 보통;
    글꼴 두께: 보통;
    글꼴 크기: 중간;
    글꼴 변형: 일반;
    글꼴 스타일: 일반;
    색상: -webkit-text;
    텍스트 정렬: -webkit-auto;
}

테이블 {
    디스플레이: 테이블;
    국경 붕괴: 분리;
    테두리 간격: 2px;
    테두리 색상: 회색;
}

이 새로운 스타일의 글꼴 크기는 내 디자인을 방해합니다. 가능하다면 내 스타일시트가 Chrome의 기본 스타일시트를 완전히 무시하도록 하는 방법이 있나요?

Answer 1

HTML 콘텐츠에 이 누락된 경우 브라우저가 사용자 정의 스타일 시트보다 "사용자 에이전트 스타일 시트"를 우선시하는 상황이 발생할 수 있습니다. 문서 유형을 추가하면 이 문제가 해결됩니다.

Answer 2

대상 브라우저는 무엇인가요? 브라우저마다 서로 다른 기본 CSS 규칙을 설정합니다. 이러한 기본값을 제거하려면 meyerweb CSS Reset 또는 normalize.css과 같은 CSS 재설정을 추가해 보세요. Google의 "CSS 재설정과 정규화"를 통해 차이점을 확인하세요.