동적으로 로드된 CSS 스타일시트가 일부 브라우저에서만 작동하는 이유는 무엇이며 어떻게 해결할 수 있습니까?

IE에서 동적으로 CSS 스타일시트 로드

동적 CSS 로드는 페이지 로드 대기 시간을 최소화하는 반응형 디자인을 만드는 데 매우 유용한 것으로 입증되는 경우가 많습니다. 그러나 이 기술을 사용할 때 사용자는 자신의 스타일이 선택한 일부 브라우저에만 적용되는 경우가 많습니다.

아래 예에서 CSS 스타일은 Firefox 및 Google Chrome에서는 성공적으로 로드되지만 인터넷에서는 로드되지 않습니다. Explorer(IE).

var head = document.getElementsByTagName('head')[0];
$(document.createElement('link'))
    .attr({ type: 'text/css', href: '../../mz/mz.css', rel: 'stylesheet' })
    .appendTo(head);

해결책:

차이점은 다음과 같은 방식에서 발생합니다. IE는 스타일시트 처리를 처리합니다. 다른 브라우저와 달리 IE는 내장된 스타일 엔진이 페이지에 로드된 모든 스타일을 구문 분석한 후에만 스타일시트 첨부를 허용합니다. 이를 방지하기 위해 우리는 로딩 프로세스 중에 스타일시트를 안정적으로 추가하는 document.createStyleSheet(url) 메소드를 활용합니다.

url = 'style.css';
if (document.createStyleSheet)
{
    document.createStyleSheet(url);
}
else
{
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
}

이 메소드를 통합함으로써 CSS가 모든 브라우저에 적용되도록 보장합니다. Internet Explorer의 고유한 로딩 동작을 사용하는 경우에도 마찬가지입니다.

위 내용은 동적으로 로드된 CSS 스타일시트가 일부 브라우저에서만 작동하는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!