Concerns have been raised about possibly duplicating this question, especially since it has taken more than an hour to find a solution.
The current scenario involves:
- A widget that requires dynamic loading of CSS
- Usage of Sammy.js and .ejs for views, where most HTML content is loaded dynamically
- Lab.js to load JavaScript files
- Ensuring that the styles are applied to all new content that appears instantly on the page
I have already explored solutions from the following related posts:
- Dynamic CSS loading in IE won't work
- Dynamically changing stylesheet path not working in IE and Firefox
(...along with others)
The only method that seems to work for me across modern browsers is injecting a "style" node with inline styles. Unfortunately, this approach fails in IE8. I can see the style node in Developer Tools but it does not apply. I've also attempted waiting until the stylesheet is applied before initiating the sammy.js application.
Your insights or referrals to relevant questions with effective solutions would be greatly appreciated.
P.S. While I have resolved the issue in IE8, ensuring compatibility with IE7 is next on the agenda.