动态添加的样式表未显示在 IE 开发人员工具中答案

【问题标题】：Dynamically added stylesheet not showing up in IE Developer Tools动态添加的样式表未显示在 IE 开发人员工具中
【发布时间】：2012-03-23 16:48:20
【问题描述】：

我正在开发一个跨浏览器书签，我需要将我自己的样式表以及各种 div 等注入到页面中。我已经让它在任何地方都可以工作，但是 IE 所以现在我正在尝试调试一些那里的样式问题。

在用户单击我的书签后，我将我的 css 添加到文档中，如下所示：

if (document.createStyleSheet){
    document.createStyleSheet("http://mydomain.com/css/mystyle.css");
} else {
    $('head').append('<link rel="stylesheet" href="http://mydomain.com/css/mystyle.css" type="text/css" />');
}

正在获取文件并将其应用于 div 等。我在页面上创建，但是当我检查 IE 9 开发人员工具中的元素时，它没有显示我动态添加的样式表中的任何属性，只有那些在样式=“{}”属性。

另外，mystyle.css 没有显示在 CSS 选项卡的下拉列表中，但它的头部确实有一个相应的元素，并且其中的样式正确地应用于 dom。

关于如何强制开发工具识别我的新工作表有什么想法吗？尝试调试 css 却不能直接在浏览器中操作它是令人愤怒的。

【问题讨论】：

标签： css internet-explorer debugging

【解决方案1】：

您是否单击了开发人员工具中的刷新按钮？它不会刷新页面，它会从当前页面重新加载 dom。

【讨论】：

是的。它在头部显示了新添加的元素，我可以看到我添加的新 div 正确呈现，但是在开发工具中它们的样式和跟踪样式选项卡仅显示“显示：块”等；没有显示来自 mystyle.css 的样式。
嗯，开发者工具有很多情况是它不能“看到”东西。除了使用 FF 或 Chrome 来调试问题外，您无能为力。如果是 IE 特有的问题，那么我建议暂时静态添加样式表，而不是动态地调试问题。
我很害怕 :(。这是一个特定于 IE 的问题（嗯，有很多）而且它是一个小书签，我将它注入到任意页面中，所以不能只需静态添加它，而不是为调试目的创建目标页面的本地副本，这可能是我要做的。哦，好吧。谢谢你的想法。
@MystereMan - 好建议。我有一个测试页面，这正是我所做的，将添加到测试页面的动态样式表中。很有帮助，谢谢。