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 issues list。

Answer 2

将CSS与！important关键字放在一起 即。

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