web-dev-qa-db-ja.com

順序なしリストに1emのマージンを与えるユーザーエージェントCSSスタイルシートルールをオーバーライドする最良の方法は何ですか？

私は、トップにFacebookの青いバーに似たtopBarを持つWebアプリで作業しています。そのバーのdiv内に、Inbox、Notificationsなどのいくつかのアイテムをリストするための順序付けられていないリストがあります。ULには、ブラウザーのユーザーエージェントスタイルシートで定義された1emのマージンがあります。これは問題です。topBarを1em押し下げているからです。これをオーバーライドしてulの境界を0にするにはどうすればよいですか？ユーザーエージェントのスタイルシートを上書きするのは悪い考えだと読んだので、何が最善かを知りたいと思っています。ありがとう。

編集：CSSファイルは次のとおりです。

body {

margin:0px;
padding:0px;
}

#topBar{
    background-color:#CCCCCC;
    height: 50px;
    width:100%;
    z-index:-1;

}

#mainNav{
    margin:0 auto;
    width:900px;
}
#logo{
    float:left;
}

#mainNav ul li{
    float:left;
    border:0px; 
    margin:0;
    padding:0;
    font-size:10px
}

そして、html：

<!DOCTYPE html>
<html>
    <head>
        <title>ff</title>
        <%= stylesheet_link_tag :all %>
        <%= javascript_include_tag :defaults %>
        <%= csrf_meta_tag %>
    </head>
    <body>
        <div id="topBar">
            <div id="mainNav">
                <div id="logo"><%=image_tag("livecove.jpg") %></div>
                <ul>
                    <li>Inbox</li>
                </ul>
            </div>
        </div>

        <%= yield %>
    </body>
</html>
cssoverriding
20
John

あなたができれば問題のあるスタイルシートを編集できる

ユーザーエージェントスタイルシートのスタイルが修正対象のブラウザーに問題を引き起こしている場合は、問題のあるスタイルを削除してテストし、他の場所で予期しない悪影響がないことを確認できます。

そうでない場合は、変更されたスタイルシートを使用します。ブラウザーの癖を修正することは、これらのシートの目的です-それらは問題を修正し、新しいものを導入することになっていません。

あなたがでない場合問題のあるスタイルシートを編集できる場合

問題のある行を含むスタイルシートを編集できない場合は、!importantキーワードの使用を検討できます。

例：

.override {
    border: 1px solid #000 !important;
}

.a_class {
    border: 2px solid red;
}

そして、HTML：

<p class="a_class">content will have 2px red border</p>
<p class="override a_class">content will have 1px black border</p>

実例

本当に必要な場所でのみ!importantを使用するようにしてください-不要なようにスタイルを再編成できる場合は、これが望ましいでしょう。

10
Michael Robinson

いいえ、ちがいます。 Meyers CSSリセットを使用:) http://meyerweb.com/eric/tools/css/reset/

11
benhowdle89

特定の問題を誰も指摘しておらず、いくつかの回答、特に受け入れられている回答が完全に誤解を招くような理由はわかりません。問題は、OPがulタグでユーザーエージェント（UA）によって直接設定されたマージンプロパティをオーバーライドする可能性のあるルールを選択しなかったことです。 OPによって使用されるマージンプロパティを持つすべてのルールを考えてみましょう。

body {

margin:0px;
...
}

Body要素はDOMでかなり上にあり、UAルールは下の要素と一致するため、UAが勝ちます。それが継承の仕組みです。継承とは、CSSカスケードによって適用されるソースからの特定の宣言がない場合に、要素のプロパティ値をその親要素から取得する手段です。 UAルールは要素に直接一致するため、親要素の特異性は役に立ちません。

#mainNav{
    margin:0 auto;
    ...
}

これはより良い試みであり、DOMの下位のmainNav要素に一致するより具体的なセレクタ#mainNavですが、ul要素がDOMのこの要素の下にあるため、同じ原理が適用されます。

#mainNav ul li{
    ...
    margin:0;
    ...
}

これはDOMで行き過ぎました！現在、セレクタはli要素の下にあるul要素と一致します。

そのため、UAルールが!importantではなくセレクタulを使用したと仮定すると、ほとんどの場合、ソリューションは単純なul { margin: 0; }でしたが、より安全です#mainNav ul { margin: 0 }と言って、より具体的にしてください。

7
user2066805

これをindex.htmlの「head」に入れます

 <style>
  html body{
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: 0;
  }
  </style>
2
warlord

私は同じ問題を抱えていましたが、何も機能しませんでした。私がしたことは、これをセレクタに追加したことです：

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
2
GitDemon

独自のスタイルシートに記述することはすべて、ユーザーエージェントスタイルを上書きすることです。これが独自のスタイルシートを記述するポイントです。

1
sevenseacat