web-dev-qa-db-fra.com

Remplacer la feuille de style d'agent utilisateur - Chrome

J'ai un élément de liste qui est affiché sur la page Web à l'aide de l'effet de survol. Le défi auquel je suis confronté ici est que lorsque j'applique une bordure ou un arrière-plan à l'élément de liste, il semble horrible en raison du remplissage qui est généré automatiquement.

Regardez cette image s'il vous plaît.

N'importe qui s'il vous plaît aidez-moi à le contourner.

J'ai déjà cherché dans les forums mais je n'ai appris à le désactiver à partir de la console que pour ne pas le dépasser.

enter image description here

htmlcsscss3google-chrome
10
Unknown User

Ajoutez simplement le style suivant:

ul { padding:0 }

Cela remplacera le style par défaut.

10
Danield

Ce que vous voyez est un "style d'agent utilisateur" - des règles standard qui sont introduites par votre navigateur pour avoir une certaine conformité entre les pages Web. Vous pouvez simplement le remplacer.

Les feuilles de style de différentes sources ont une priorité différente comme suit (du plus bas au plus élevé) *:

  • styles d'agent utilisateur => ce sont les styles que vous voyez dans la capture d'écran
  • styles d'utilisateur
  • créer des styles CSS (attention à la priorité)
  • créer des styles en ligne
  • styles d'auteur avec !important
  • styles utilisateur avec !important

agent utilisateur = le navigateur
auteur = vous
utilisateur = l'utilisateur du navigateur

Donc pour vous, tout ce dont vous avez besoin, c'est de déclarer

ul { padding:0 }

et cela écrasera les styles UA. Cependant, si l'utilisateur déclare ses propres styles avec !important, vous ne pouvez rien y faire en tant qu'auteur heureusement pour l'utilisateur), vous ne pouvez pas remplacer ces styles.

* Dans la vraie vie, la nature en cascade est encore plus complexe que cette liste pourrait impliquer, ce que je n'ai pas couvert par souci de simplicité. Si cela vous intéresse, jetez un œil à --- (CSS precendence.

17
Christoph