Question

我正在尝试将规则插入样式表。该规则是有效的（我认为），并且取自我的代码来自normalize.css（https://github.com/necolas/normalize.css/blob/master/normalize.css#L206-L212）：

var styleEl = document.createElement('style');
document.head.appendChild(styleEl);
var styleSheet = styleEl.sheet;
styleSheet.insertRule('button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner{border-style:  none;padding:  0;}');

Chrome（75.0.3770.100）引发错误：

VM381:1 Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule 'button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner{border-style:  none;padding:  0;}'.
    at <anonymous>:1:12

上面的代码用于插入其他规则，效果很好。只是这个规则失败了。这是normalize.css中格式错误的规则吗？

Answer 1

尽管这可能不是您要查找的内容，但问题似乎出在Chrome。如果您在Firefox（该规则的意思是浏览器）中运行此程序，它将正常工作。话虽如此，我建议您在添加此规则之前先进行检查以确保浏览器为Firefox。

可能会发生以下情况：

if ('MozBoxSizing' in document.body.style) { // Firefox 3.2+
    styleSheet.insertRule('button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner{border-style:  none;padding:  0;}');
}

可以找到其他浏览器的检查here

DOMException：无法执行styleSheet.insertRule

1 个答案: