css - GoogleChrome拡張機能のランダムな空白

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';
});

8pxChromeポップアップの標準値であるため、値として使用しました。

このバグをChromeの問題リストに報告することを検討する必要があります。

Answer 2

CSSに！importantキーワードを付けます。

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