Internet Explorer fails to load css files

问题:

Situation:

I have a PHP written page, wich will include a css via

<style type="text/css">@import url(/css/my.css);</style>

Afterwards (and on demand) a javascript file is loaded, that opens a new "Window" where the css declarations would be used.

This works in all Browsers except Internet Explorer (7-9).

Problem:

According to the IE Developer Tools (F12) the css file is loaded and I can see all declarations made within this file (they are correct), but when the new window is displayed, the css declarations do not seem to be in effect.

"Solution":

Deselecting (and reselecting them, even if it's not necessary) some of the rules of the given CSS File in the CSS-Tab of the IE Developer Tools make the page "render" correctly.

Question:

Where does this behaviour come from, and how do i get rid of this?

Additional Information:

I do not have more than 4095 (not even counting all in all CSS Files alltogether) selectors (in fact I have less than 2.5k) and I only load less than 31 (exactly 7) different CSS Files.

As requested:

<div class="navigate">
<div class="nav-slider">
  <div class="nav-slider-left">
    <span role="button" class="nav-link nav-page-back">&lt;</span>

    <div class="page-number">
      <span>1 of 1</span>
    </div><span role="button" class="nav-link nav-page-next">&gt;</span><span role=
    "button" class="nav-link nav-now">&acirc;&mdash;</span><span role="button" class=
    "nav-link nav-prev-week">&lt;&lt;</span><span role="button" class=
    "nav-link nav-prev-day">&lt;</span>
  </div>

  <div class="nav-slider-content">
    <div class="nav-slider-bar">
      <a class="nav-slider-button"></a>
    </div>
  </div>

  <div class="nav-slider-right">
    <span role="button" class="nav-link nav-next-day">&gt;</span><span role="button"
    class="nav-link nav-next-week">&gt;&gt;</span><span role="button" class=
    "nav-link nav-zoomIn">+</span><span role="button" class=
    "nav-link nav-zoomOut">-</span>
  </div>
</div>

(i have reduced the HTML Code to the relevant part [ExtJS is creating a massive amount of structure around the given code)

CSS Declarations are here

回答1:

I'm not sure but it might be a caching problem since your styles are interpreted as inline-css and won't be saved when you open a new window. Did you try to use:

<link href="yourcssfile.css" type"text/css" rel="stylesheet"/> 

UPDATE: It seems to be a bug. I found your problem in this article (point5). Solution is in there aswell.

http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml