Chrome의 스타일 호환성 문제

1. 문제

우연히 출석 체크 달력이 이렇게 변한 것을 발견했습니다:

이전에는 이런 스타일이 나타나지 않았습니다(본래는 정렬된 달력 격자 형태여야 합니다). 최근 업데이트 확인과 관련이 있는 것 같은데, Chrome 28에서 업데이트를 확인하다 실패한 후 이런 문제가 발생한 것 같습니다.

Chrome 43은 처음부터 이 문제가 있었던 것 같습니다. 당시에는 왜 Chrome의 새 버전이 이전 버전과 호환되지 않는지 의아해했는데, 이는 Google답지 않은 모습이었습니다.

2. 원인

스타일에는 문제가 없다고 생각했습니다. 배포 당시 IE 6+, Chrome 28, Firefox와 호환되었기에 스타일을 잘못 작성해서 생긴 문제는 아니었습니다.

이미지에서 볼 수 있듯이 동그라미 표시된 격자의 스타일은 잘못되었지만, 표시되지 않은 격자의 스타일은 정상입니다. 자세히 비교해보니 두 가지의 차이점은 동그라미 표시된 격자에 check 클래스가 하나 더 있다는 것뿐이었습니다. 이상하게도 요소를 확인하고 check 스타일을 비활성화해도 소용이 없었습니다(check 스타일은 단지 배경 이미지만 설정할 뿐이었습니다). 도무지 이해할 수 없었습니다.

스타일 목록을 아래로 내려보니 뜻밖에도 또 다른 check가 보였습니다:

맞습니다, 이것이 바로 주범이었습니다. 이상한 달력은 이것 때문에 만들어졌습니다. 브라우저 기본 스타일에 check라는 이름이 있을 줄이야... 최소한 접두사라도 붙여줬으면 좋았을 텐데요.

3. 해결 방법

다른 사용자들이 제시한 비교적 과학적인 해결책은 다음과 같습니다:

-webkit-appearance:none; /* 去除默认样式 */

하지만 이것은 효과가 없는 것 같았습니다.

할 수 없이 가장 직접적인 방법을 사용하기로 했습니다: 클래스 이름을 바꾸는 것입니다. check는 너 다 가져라, 난 안 쓸란다.

덧붙이는 말

Chrome에 왜 이런 이상한 기본 스타일이 내장되어 있는지 정말 이해할 수 없습니다.