为什么浏览器在此样式属性中插入“9”

Why are browsers inserting a `9` into this style attribute

本文关键字：插入 属性 浏览器 样式 为什么      更新时间：2023-09-26
var div = document.createElement('div');
div.style.cssText = "background-image: url('http://imgs.com/mouse.png   ')";
div.style.cssText
//=> "background-image: url("http://imgs.com/mouse.png'9 ");"

上面的代码，即.png后缀后面的选项卡，在 Chrome 或 Firefox 控制台中运行时，将输出显示的行，并在 URL 后附加'9。为什么？

我读过'9是某种仅针对特定版本的IE的黑客攻击，但是为什么Chrome和Firefox会自动插入它呢？

PS：为了获得额外的浏览器乐趣，您能猜出如果该URL是相对的并且您想使用经典的<a> href技巧来解决它会发生什么吗？以下是在虚构的http://imgs.com域上会发生什么情况：

var a = document.createElement('a');
// Actually parsed from the above response, not assigned manually
a.href = "/mouse.png''9 ";
a.href
//=> "http://imgs.com/mouse.png/9"   (in Chrome)
//=> "http://imgs.com/mouse.png%5C9" (in Firefox)

因此，虽然带有'9后缀的 URL 实际上仍然有效，但解析的 URL 现在将指向不正确的位置。

当控制台必须打印源代码时，它会尝试以明确的方式执行此操作。制表符显然不是制表符，还有许多其他特殊字符具有相同的问题。因此，不可打印或不明显的字符使用适当的转义序列呈现，其中"适当"表示"适合语言上下文"。

CSS 转义看起来像'nnnnnn其中n是十六进制数字。可以有一到六个这样的数字。转义'9是制表符的转义。

请注意，在实际的 CSS 源文本中，您也可以互换使用实际制表符和表示法'9并获得完全相同的结果，因为 CSS 解析器将'9解释为单个制表符，就像实际的制表符一样。

控制台的描述行为不在任何标准中(因为开发人员工具本身不是标准化的(，但这是此类工具的任何设计人员都可能做的事情。

相关文章：