web-dev-qa-db-fra.com

Quelle est la meilleure façon de remplacer une règle de feuille de style CSS d'agent utilisateur qui donne aux listes non ordonnées une marge de 1em?

Je travaille sur une application Web qui a une barre supérieure similaire à la barre bleue de Facebook en haut. J'ai une liste non ordonnée dans le div de cette barre pour lister certains éléments, comme la boîte de réception, les notifications, etc. L'UL a une marge de 1em définie par la feuille de style de l'agent utilisateur de mon navigateur. C'est un problème car il pousse ma barre supérieure vers le bas 1em. Comment puis-je remplacer cela pour faire la frontière de ul = 0? J'ai lu que remplacer les feuilles de style de l'agent utilisateur était une mauvaise idée, je suis donc curieux de savoir ce qu'il y a de mieux à faire. Merci.

EDIT: Voici le fichier 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
}

Et le 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

Si vous êtes capable de modifier la feuille de style incriminée

Si le style de la feuille de style de l'agent utilisateur cause des problèmes au navigateur qu'il est censé résoudre, vous pouvez essayer de supprimer le style incriminé et de le tester pour vous assurer qu'il n'a pas d'effets indésirables inattendus ailleurs.

Si ce n'est pas le cas, utilisez la feuille de style modifiée. La correction des bizarreries du navigateur est à quoi servent ces feuilles - elles corrigent des problèmes, elles ne sont pas censées en introduire de nouvelles.

Si vous n'êtes pas capable de modifier la feuille de style incriminée

Si vous ne parvenez pas à modifier la feuille de style qui contient la ligne incriminée, vous pouvez envisager d'utiliser le !important mot-clé.

Un exemple:

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

.a_class {
    border: 2px solid red;
}

Et le HTML:

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

exemple en direct

Essayez d'utiliser !important uniquement là où vous en avez vraiment besoin - si vous pouvez réorganiser vos styles de manière à ne pas en avoir besoin, ce serait préférable.

10
Michael Robinson

Non ce n'est pas. Utilisez la réinitialisation CSS Meyers :) http://meyerweb.com/eric/tools/css/reset/

11
benhowdle89

Je ne comprends pas pourquoi personne ne pointe sur le problème spécifique et certaines réponses sont totalement trompeuses, en particulier la réponse acceptée. Le problème est que l'OP n'a pas choisi une règle qui pourrait éventuellement remplacer la propriété margin définie par l'agent utilisateur (UA) directement sur la balise ul. Considérons toutes les règles avec une propriété margin utilisée par l'OP.

body {

margin:0px;
...
}

L'élément body est en haut dans le DOM et la règle UA correspond à un élément ci-dessous, donc l'UA gagne. C'est ainsi que fonctionne l'héritage. L'héritage est le moyen par lequel, en l'absence de déclarations spécifiques de toute source appliquée par la cascade CSS, une valeur de propriété d'un élément est obtenue à partir de son élément parent. La spécificité sur l'élément parent est inutile, car la règle UA correspond directement à l'élément.

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

C'est une meilleure tentative, un sélecteur plus spécifique #mainNav, qui correspond à l'élément mainNav plus bas dans le DOM, mais le même principe s'applique, car l'élément ul est toujours en dessous de cet élément dans le DOM.

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

C'est allé trop loin dans le DOM! Maintenant, le sélecteur correspond à l'élément li, qui se trouve sous l'élément ul.

Donc, en supposant que la règle UA utilise le sélecteur ul et non !important, ce qui est probablement le cas, la solution aurait été simple ul { margin: 0; }, mais il serait plus sûr de le rendre plus précis, par exemple #mainNav ul { margin: 0 }.

7
user2066805

mettez ceci dans votre "tête" de votre index.html

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

J'ai eu les mêmes problèmes mais rien n'a fonctionné. J'ai ajouté ceci au sélecteur:

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

Tout ce que vous écrivez dans votre propre feuille de style remplace les styles d'agent utilisateur - c'est le point d'écrire votre propre feuille de style.

1
sevenseacat