css - Google Chrome 扩展中的随机空格

Question

我有一些 CSS：

fieldset {
    border-radius: 5px;
    border: 3px solid blue;
    padding: 5px;
    margin: 0em;
}
legend {
    font-weight: bold;
    color: green;
}
#myform{
    width: 330px;
    margin: 0em;
}
body {
    font-family: Arial, sans-serif;
}

当我用 嵌入它时<style>，它工作得非常好：

但是，当我将相同的 CSS 放入样式表并使用 导入时<link>，我会得到一些随机空格：

我已经完全删除了表单元素，并且仍然有空格（尽管如果我将它们保留在里面，它会更多）。我使用 Chrome 开发人员控制台来检查表单和正文高度$(body).css("height")（表单也是如此），它给了我一个太小而无法包含空格的数字，但如果忽略空格，它似乎与高度匹配。这是从哪里来的？

Answer 1

这似乎是一个错误，当在开发人员控制台中来回更改主体的边距时，它再次正确。在 CSS 中设置此属性根本没有任何效果。

一个微不足道的解决方法是为您的弹出窗口创建一个 javascript 文件，例如popup.js，然后在加载弹出窗口后更改其中的边距：

document.addEventListener('DOMContentLoaded', function() {
  document.body.style.margin = '8px';
});

我将8px其作为值，因为这是 Chrome 弹出窗口的标准值：

您应该考虑将此错误报告给Chrome 问题列表。

Answer 2

将 CSS 与 !important 关键字即

#myform{
    width: 330px !important;
    margin: 0em !important;
}