우리 모두가 알다시피, 프론트 엔드 개발을하는 사람들은 IE 개발자를 몇 번 시작하고 싶어합니다. IE 개발자의 명성은 GFW 개발자의 명성 이상입니다. 그들은 자신의 양심에 대비하여 시장을 망치고 모든 사람이 그들을 처벌 할 수 있습니다. 그러나 중국 의이 곳에서는 현실에 절을 할 방법이 없습니다.
최근에 우리의 제품은 브라우저에 CSS 조각을 동적으로로드해야하며 이전 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var bubblecss = document.createElement ( 'style');
bubblecss.type = 'text/css';
bubblecss.innerhtml = blc_conf.bubblestyle;
document.getElementsByTagName ( 'head') [0] .AppendChild (bubblecss);
그러나 이것은 IE9에 의해서만 뒷받침되며 IE8에 따라 문제가있을 것입니다. 나는 이것을 눈치 채지 못했습니다. 나는 최근에 재현 할 때까지 그것을 찾지 못했고 완전한 테스트를 수행했습니다.
온라인에서 트릭을 찾았습니다. 나는 그것을 시도했고 그것은 작동하지만 몇 가지 문제가 있습니다
코드 사본은 다음과 같습니다.
window.bc_bubble_css = blc_conf.bubblestyle;
문서 .CreatestyLesheet ( "JavaScript : BC_BUBBLE_CSS");
여기서 변수 BC_BUBBLE_CSS로 정의한 스타일을 만들 수 있습니다. 그러나 HTML5가 점차 인기가 높아짐에 따라 일부 CSS3 선택기도 CSS에 혼합됩니다. 이 방법을 사용하면 IE8 파서가 Parser가 CSS3 선택기를 구문 분석하고 후속 CSS의 구문 분석을 중지 할 때 예외가 발생합니다. 이로 인해 CSS는 중간에만 적재됩니다. 온라인에서 발견 된 방법은 스타일 시트 유형 Addrule을 사용하여 증가하는 것이지만 CSS2 선택기와 스타일을 지정해야합니다.
따라서 CSS에서 단일 규칙을 분해 한 다음 Addrule을 차례로 호출해야합니다. 예:
코드 사본은 다음과 같습니다.
var s = document.createstylesheet ();
var rules = blc_conf.bubblestyle.replace (// // [^/*]*/*// g, "") .replace (/@[^{]*/{/g, '') .match (/[^/{/}]+/{[^/}}+/}/g);
for (var i = 0; i <규칙 .length; i ++) {
var m = 규칙 [i] .match (/(.* )/ s*/{/s*(.*)/}/);
if (m) {
노력하다 {
s.addrule (m [1], m [2]);
} catch (e) {
}
}
}
처음에는 CSS3 선택기의 시선과 일부를 제거하는 두 가지 교체품이 있지만 네트워크를 놓치는 선택기가 여전히 있으며 나중에 캐치를 시도하여 잡아야합니다.
또한 IE 인터페이스를 다시 디자인하는 사람들을 멸시합니다