IE7 Bug, dynamically loaded css files including @import fails to load imports
Consider the following scenario:
- html page:
- head
<link type="text/css" rel="stylesheet" media="all" href="css/red.css" id="cssLink"/>
- script
function changeRed() {
var cssFile = document.getElementById('cssLink');
if( cssFile ) {
cssFile.href = 'css/red.css';
}
}
function changeBlue() {
var cssFile = document.getElementById('cssLink');
if( cssFile ) {
cssFile.href = 'css/blue.css';
}
}
- body
<div id="testZone">
<div id="red">
<h1>This should be red</h1>
<p>"Cogito ergo sum"</p>
</div>
<div id="blue">
<h1>This should be blue</h1>
<p>"Cogito ergo sum"</p>
</div>
</div>
And the following css files:
- red.css
@import url(redminor.css);
div#testZone {
background-color:white;
margin: 20px;
border:3px solid red;
padding:20px;
}
- redminor.css
div#red { display:block;}
#red h1 { color:red; }
#red p { color: red;}
div#blue { display: none;}
- blue.css
@import url(blueminor.css);
div#testZone {
background-color:white;
margin: 20px;
border:3px solid blue;
padding:20px;
}
- blueminor.css
div#blue { display:block;}
#blue h1 { color:blue; }
#blue p { color: blue;}
div#red { display: none;}
At page load the red css is applied by default, which works as expected in all browsers.
When the changeRed() or changeBlue() functions are invoked, the behavior is the expected one in: IE6, FF 1.5-20, Opera 9, but in IE7 only the blue.css or red.css rules get’s applied the ones from the imported css files (blueminor.css or redminor.css) are ignored.
The import works since at page load IE7 applies correctly the rules defined in the imported styles.
Also as a workaround, if I dynamically remove the cssLink element from the DOM, and then I re-create it works correctly in all browsers including IE7.
So if you do this instead things will work as supposed:
function replaceRed() {
var cssFile = document.getElementById('cssLink');
var par = cssFile.parentNode;
par.removeChild(cssFile);
cssFile = document.createElement('LINK');
cssFile.type = 'text/css';
cssFile.id = 'cssLink';
cssFile.media = 'all';
cssFile.rel = 'stylesheet';
cssFile.href = 'css/red.css';
par.appendChild(cssFile);
}
function replaceBlue() {
var cssFile = document.getElementById('cssLink');
var par = cssFile.parentNode;
par.removeChild(cssFile);
cssFile = document.createElement('LINK');
cssFile.type = 'text/css';
cssFile.id = 'cssLink';
cssFile.media = 'all';
cssFile.rel = 'stylesheet';
cssFile.href = 'css/blue.css';
par.appendChild(cssFile);
}
Download the test case: http://remus.pereni.org/fisiere/div/iebug/iebug.zip
View the test case: http://remus.pereni.org/fisiere/div/iebug/
May 19th, 2007
. I've got two weeks ago my 
