css - Chrome 开发工具将链接标签替换为样式标签

标签 css html google-chrome-devtools

我在使用 Chrome 开发工具时遇到了一个奇怪的问题:

  • 在我正在开发的 Web 应用程序中,HTML header 中的 CSS link 标记在 elements 选项卡 中显示时转换为 style> CDT 的
  • 在其他网站上,链接标签在 CTD 中正确显示。

示例:

  • 在 HTML 中(使用 ctrl+u )我明白了:

<link href="./style/css/lib/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css"> <link href="./style/css/lib/bootstrap.css" rel="stylesheet" type="text/css">

  • 在 CDT 的元素选项卡中,我得到: Link html tag transformed in style by chrome dev tools

这对我来说是个大问题,因为如果样式不包含在链接标签中,我就无法将样式链接到本地​​文件。

所以问题是:为什么会这样?以及如何强制 CDT 通过原始链接标记来解释样式?

最佳答案

经过几个小时的研究,我发现库 prefixfree ( http://leaverou.github.io/prefixfree/ ) 是造成这种情况的原因。

它从链接文件中获取 CSS,对其进行修改,最后将其放回脚本标签中。

关于css - Chrome 开发工具将链接标签替换为样式标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25033873/

相关文章:

javascript - HTML、JavaScript 和 CSS 中的自定义弹出框

html - 悬停时,li 元素应占据容器的全部高度

javascript - 如何检测鼠标在 jQuery 中的子元素上?

javascript - jQuery - 选择 ID 包含特定字符串且属于特定类的 div

google-chrome - Chrome 调试器显示警告计数但没有详细信息

javascript - 如何使用 jsPDF 和 canvas 生成 PDF?

javascript - JavaScript 中的 HTML5 音频 : What am I doing wrong?

html - CSS 使用 not in get all with 模式

google-chrome-extension - 如何打开正确的 devtools 控制台以查看扩展脚本的输出?

css - 在 Chrome 开发者工具中输入 CSS 媒体查询