Cross Browser Police/Problèmes de couleur - Chrome/Safari

Question

En espérant que quelqu'un puisse vous aider à savoir ce que je fais de mal, car mon css (style) pour le site semble bien dans Firefox mais dans Chrome et Safari, mes polices sortent Regarder la couleur noire au lieu de la couleur grise telle quelle, dans Firefox. Quelqu'un peut-il aider à expliquer pourquoi les polices/couleurs sont différentes dans Safari et Chrome - il ressemble à du noir gras.

style tête J'utilise dans mon div contenu, à savoir:

#content { 
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: 18px; 
    color: #333; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    border-right-color: #990; 
    border-bottom-color: #990; 
    border-left-color: #990; 
    padding-bottom: 10px; 
    padding-right: 10px; 
    padding-left: 10px; 
    background-color: #FFF; 
    width: 973px; 
    text-align: left; 
    display: block; 
    background-image: url(images/bgcontent.jpg); 
    background-repeat: repeat; 
} 


h1 { 
    font-family: "Lucida Grande"; 
    background-color: transparent; 
    height: 20px; 
    width: 650px; 
    color: #FF9904; 
    font-size: 36px; 
    text-align: left; 
    float: none; 
    vertical-align: top; 
    border-bottom-width: 2px; 
    border-bottom-style: solid; 
    border-bottom-color: #999; 
    letter-spacing: normal; 
    margin: 0; 
    padding: 0.5em 0; 
} 

Je trouve également ce lien relatif à Google Chrome, à savoir sur l'utilisation:

@charset "xxx"

http://www.google.com/chrome/intl/en/webmasters-faq.html#fontspecs

Merci.

Answer 1

Je viens de vérifier mon ordinateur, et il ne semble y avoir aucune différence de couleur entre Firefox et Chrome. Je cours Windows (pour les deux), et il devrait être noté qu'il y aura toujours une différence de couleur entre les Macs et les PC car ils sont calibrés avec différentes valeurs de gamma. En savoir plus sur les trucs gamma here, mais notez que vous ne pouvez pas faire grand chose à ce sujet d'un point de vue CSS.

Un autre problème possible est que cela pourrait être juste votre ordinateur ... avez-vous essayé ce problème sur plusieurs ordinateurs? Vous pouvez toujours essayer d'utiliser un outil tel que Browsershots ou Browserlab.

Enfin, il est possible qu'il y ait du code pertinent qui déclenche des différences entre navigateurs .... est-ce tout votre code ou y at-il plus de CSS quelque part? Pouvez-vous fournir un lien direct vers la page avec laquelle vous rencontrez des problèmes?

Answer 2

Est-ce que cela arrive aussi si vous faites une couleur, par exemple rouge? Si ce n'est pas le cas, alors c'est juste l'anti aliasing de webkit qui est plus agressif.

Mais si cela se produit toujours, vous pouvez vérifier avec l'inspecteur de chrome et firebug si la façon dont safari/chrome et firefox interprètent le CSS est différente. Quel sélecteur de couleur choisit-il

Answer 3

L'échantillon css que vous avez posté est correct. Essayez d'ajouter !important à l'attribut de couleur.

Answer 4

Au moment de la rédaction de ce document (juin 2015), il existe un bug in OS X Chrome that means it doesn't apply colour correction to CSS-colours ou un untagged images. Safari (depuis OS X 10.9) applique une correction de couleur aux couleurs CSS et aux images.