HTML의 여러 클래스 Chrome에서는 작동하지만 Edge 및 Firefox에서는 작동하지 않습니다.

Question

이것은 내가 본 이상한 것 중 하나입니다. 나는 전에 내가 만든 사이트를 다시 확인하기로 결정했고, 물론 뭔가가 꺼져있었습니다. 필자는 주로 Firefox를 주로 사용하며 형식이 이상하게 보였습니다. Chrome으로 전환했는데 모든 것이 멋지게 보입니다. 나는 가장자리로 바꿨고 모든 것이 다시 잘못되었다. 나는 엘리먼트 (로그인 버튼, 텍스트 입력 박스)에 포함 된 각각의 클래스에 대한 CSS를 보여 주 었는가? Edge와 Firefox에서는 마지막 클래스의 CSS 만 포함 된 것으로 보입니다.

이 사이트는 https://avonctnhs.org

사람이 무엇을 여기에 가고 어떤 생각이 있습니까입니까? 클래스는 HTML로 설정되고 런타임에 클래스를 추가하는 JavaScript는 없습니다. 서버의 파일에서로드 된 HTML.

정말 고마워요.

편집 : JavaScript를 사용하여 클래스를 추가하려는 사람들이나 브라우저에서 작동하지 않는 오타를 가진 사람들을 위해 잠시 동안 검색을 해봤습니다.

또한 필요한 모든 코드는 멋진 빠른 검사 요소로 표시되어야합니다.

Answer 1

페이지가 모든 브라우저에서 지원되지 않는 HTML imports에 의존하기 때문에 CSS 파일을로드 할 수 없습니다.

소스 코드의 소스 코드는 다음과 같이 바뀌어야합니다.

<!-- Additional Headers --> 

<link rel="import" href="/core/custom-elements/text-input/text-input.html"> 
<link rel="import" href="/core/custom-elements/button/button.html"> 

위의 코드는 실제로 위의 두 파일의 내용 인 아래 코드로 바꿀 수 있습니다.

<script src="index.js"></script> 
<link rel="stylesheet" type="text/css" href="style.css"> 

이렇게하면 문제가 해결됩니다. 다음은 Firefox가 아직 HTML 가져 오기를 지원하지 않는다는 MDN의 발췌 내용입니다.

Firefox는 현재 양식으로 HTML 가져 오기를 제공하지 않습니다. 자세한 내용은이 상태 업데이트를 참조하십시오. 표준 또는 대체 메커니즘에 대한 합의가 이루어질 때까지 Google의 webcomponents.js와 같은 polyfill을 사용할 수 있습니다.