Como todos sabemos, aquellos que hacen desarrollo front-end quieren patear a los desarrolladores varias veces. La reputación de los desarrolladores de IE no es menor que la de los desarrolladores de GFW. Arruinan el mercado contra su conciencia, y todos pueden castigarlos. Sin embargo, en estos lugares en China, no hay forma de inclinarse ante la realidad.
Recientemente, nuestro producto necesita cargar dinámicamente una pieza de CSS en el navegador, y el código anterior se usó directamente:
La copia del código es la siguiente:
var bubblecss = document.createElement ('estilo');
bubblecss.type = 'text/css';
bubblecss.innerhtml = blc_conf.bubblestyle;
document.getElementsBytagName ('Head') [0] .AppendChild (bubblecss);
Sin embargo, esto solo es compatible con IE9, y habrá problemas bajo IE8. Nunca he notado esto. No lo encontré hasta que recientemente refactoré e hice una prueba completa.
Encontré un truco en línea. Lo probé y funciona, pero hay algunos problemas
La copia del código es la siguiente:
Window.bc_bubble_css = blc_conf.bubblestyle;
document.createstylesheet ("javaScript: bc_bubble_css");
Aquí puede crear un estilo definido por la variable bc_bubble_css. Sin embargo, a medida que HTML5 se está volviendo popular gradualmente, algunos selectores CSS3 también se mezclan en nuestro CSS. El uso de este método hará que el analizador IE8 arroje una excepción cuando el analizador se analice al selector CSS3 y deje de analizar el CSS posterior. Esto hace que el CSS solo se cargue a mitad de camino. Los métodos encontrados en línea son usar el tipo de hojas de estilo para aumentar, pero esto requiere que especifique el selector y el estilo CSS2.
Por lo tanto, es necesario desmontar una sola regla de CSS y luego llamar a Addrule a su vez. Ejemplo:
La copia del código es la siguiente:
var s = document.createstylesheet ();
Var Reglas = blc_conf.bubblestyle.replace (///*[^/*]*/*// g, "") .replace (/@[^{]*/{/g, '') .match (/[^/{/}]+/{[^/}]+/}/g);
para (var i = 0; i <rules.length; i ++) {
var m = reglas [i] .match (/(.*)/ s*/{/s*(.*)/}/);
if (m) {
intentar {
S.Addrule (m [1], m [2]);
} catch (e) {
}
}
}
Hay dos reemplazos al principio, eliminando la mirada y parte del selector CSS3, pero todavía hay selectores que pierden la red, y debe atraparla más tarde intentando atrapar.
Además, desprecio a los que diseñan las interfaces de nuevo