css @import causes extra GET request for file on wrong path

[GoogleCodeExporter]

What steps will reproduce the problem?
1. extract attached example onto a webserver
2. open test.html with IE8
3. open test.html with something else

What is the expected output? What do you see instead?
Page should display a green 'hello'. On IE8 it displays a red 'hello' because 
an extra css file gets included.

What version of the product are you using? On what operating system?
IE9.js from ie7-2.1(beta4).zip

Please provide any additional information below.
In some css files we use the css @import directive with a relative path to a 
file in the same directory. After deploying IE9.js I've been getting lots of 
apache error log entries, all from IE8 clients, trying to fetch said imported 
file from the website's root directory. The attachment is a minimalistic test 
case to reproduce this issue. It demonstrates a pathologic scenario where the 
fetch actually succeeds; normally all you'll get is tons and tons and tons of 
error log entries.

What happens is that after the browser fetches all required files, it performs 
an extra GET request at the end. So far I've found that having the css with the 
import call in the web root avoids the issue. Also, removing the <!DOCTYPE> 
directive from the html file avoids the issue for some reason.

All the error log entries so far were from IE8. We also tested IE6, it does not 
exhibit this issue. No non-IE browser tested does this either.

Original issue reported on code.google.com by theultramage on 30 Aug 2010 at 10:39

Attachments:

• css-import-ie8-bug.zip

[GoogleCodeExporter]

Forgot to mention one obvious but important thing: not including IE9.js also 
avoids the issue, so it's probably not a problem with IE8 itself.

Original comment by theultramage on 30 Aug 2010 at 10:43

[GoogleCodeExporter]

Likely related issue ... in IE8 Standard View (not Compatibility View), my 
content appeared unstyled.

I'm using a "master" CSS file that includes @import statements for other CSS 
files in the same directory (so a relative path), for example:

@import url(layout.css);

Fixed the issue by changing the path to be absolute.

@import url(/css/layout.css);

As OP commented, not including IE9.js also fixed the issue.

Original comment by alio...@gmail.com on 21 Oct 2010 at 11:34

[GoogleCodeExporter]

this can be fix by changed the following lines of code 

replace gettext function with folloiwng @717 line

 getText: function(styleSheet, path) {
    // Internet Explorer will trash unknown selectors (it converts them to "UNKNOWN").
    // So we must reload external style sheets (internal style sheets can have their text
    // extracted through the innerHTML property).

    // load the style sheet text from an external file
    try {
      var cssText = styleSheet.cssText;
    } catch (e) {
      cssText = "";
    }
    if (httpRequest) cssText = loadFile(styleSheet._href || styleSheet.href, path) || cssText;
    return cssText;
  }

and 
stylesheet for loop with follwint @ 866
  // Load all style sheets in the document
    for (var i = 0; i < styleSheets.length; i++) {
      var styleSheet = styleSheets[i];
      if (!styleSheet.disabled && !styleSheet.ie7) this.cssText += getCSSText(styleSheet,path);
    }

Original comment by mee...@gmail.com on 28 Feb 2013 at 11:36