web-dev-qa-db-fra.com

Feuille de style de l'agent utilisateur Chrome écrasant le style de mon site

J'ai le code CSS suivant qui style le lien sur l'une de mes pages:

a:link, a:visited, a:active {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

Cependant, lorsque je le charge, ils apparaissent en bleu dans Chrome et en blanc dans Firefox. Les outils de développement de Chrome révèlent que mon style remplace supposément la feuille de style de l'agent utilisateur:

enter image description here

Pourquoi ne montre-t-il pas correctement? J'ai essayé de placer le jeu de caractères en haut de ma feuille de style:

@charset "UTF-8";

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    font: 11px "Lucida Grande", Arial, Sans-serif;
}

a:link, a:visited, a:active {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

input[type=email], input[type=password] {
    display: block;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #ACE;
    font-size: 13px;
    margin: 0 0 5px;
    padding: 5px;
    width: 203px;
}

Mais ça n'a pas aidé. Ma feuille de style est liée dans la tête avec:

<link href="/assets/global.css?body=1" media="screen" rel="stylesheet"
type="text/css">

Et le code html pour les liens:

<a href="/users/sign_in">Sign in</a>
<a href="/users/password/new">Forgot your password?</a>
<a href="/users/auth/facebook">Sign in with Facebook</a>

Voici à quoi ils ressemblent dans Chrome (13.0.782) - incorrect:

enter image description here

Voici à quoi ils ressemblent dans Firefox - correct:

enter image description here

Il semble que la feuille de style de l'agent utilisateur remplace mon style. Pourquoi?

htmlruby-on-railscssgoogle-chromeweb
22
TK Gospodinov

Vonkly a aidé à identifier le problème. J'ai fouillé dans toutes mes feuilles de style et j'ai trouvé une faute de frappe dans l'une d'elles: l'élément parent manquait lors de la définition du style de lien pour l'en-tête

header a:link, header a:visited {
...
}

J'ai eu

header a:link, a:visited {
...
}

il a donc été prioritaire sur le style que j'ai défini pour les liens dans le corps. Je dois l'avoir manqué en révisant mes feuilles de style la première fois.

Merci pour vos commentaires, tout le monde!

7
TK Gospodinov

Je ne sais pas pourquoi mais j'ajoute ceci <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Avant <html> et c'est résolu

11
Ahmad Muzakki

Ajoutez simplement <!DOCTYPE html> avant la balise <html>.

4
barbolo

J'avais le même genre de problème, dans mon cas, certaines classes sont résolues avec force pour s'afficher: aucune

Après 30/40 min, j’ai cherché sur les extensions du navigateur et découvert que tout cela était dû à AD Blocker .

donc, si l’une des solutions ci-dessus ne vous convient pas, essayez-le également une fois si vous avez ce type d’extension de navigateur.

2
Vipin Chaudhary

La feuille de style de l'agent utilisateur n'entre en jeu que si votre css néglige de définir une propriété pour une balise. Considérez que vous pourriez avoir une faute de frappe dans votre style CSS.

Il est fort probable que si vous placez la déclaration de balise au début du fichier css et que cela fonctionne, il y a une erreur dans votre css.

Essayez de lancer votre css à travers CSS Lint

J'ai eu ce problème persistant et découvert une erreur dans mon css.

1
tony gil