Problème avec la couleur de fond et Google Chrome
Parfois, j'ai un arrière-plan brisé dans Chrome. Je ne reçois pas cette erreur avec un autre navigateur.
C'est la simple ligne CSS responsable de la couleur de fond du corps:
body
{
background: black;
color: white;
font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}
C'est exactement comme ça que j'ai ce problème. Je clique sur un lien inclus dans l'e-mail d'un compte Gmail et j'obtiens un problème (aucun arrière-plan). J'actualise ensuite la page et l'arrière-plan est complètement coloré.
Comment résoudre ce problème?
Jamais entendu parler. Essayer:
html, body {
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
font-family: ...;
}
Ok les gars, j'ai trouvé une solution , . Ce n'est pas génial mais fait l'affaire sans effets secondaires.
Le HTML:
<span id="chromeFix"></span>
(mettez ceci en dessous des balises body)
Le CSS:
#chromeFix { display: block; position: absolute; width: 1px; height: 100%; top: 0px; left: 0px; }
Ce que cela fait pour résoudre le problème:
Cela oblige Chrome à penser que le contenu de la page est égal à 100% lorsque ce n'est pas le cas. Cela empêche le corps "d'afficher" la taille du contenu et de résoudre le bogue d'arrière-plan manquant. Il s’agit en gros de faire ce que height: 100% fait lorsqu’il est appliqué au corps ou au html mais vous n’obtenez pas l’effet secondaire de couper vos arrière-plans lors du défilement (au-delà de 100% de la hauteur de la page) comme vous le faites avec une hauteur de 100% sur ces éléments.
Je peux dormir maintenant =]
J'avais le même problème sur quelques sites et je l'ai corrigé en déplaçant le style d'arrière-plan de body en HTML (ce qui, je suppose, est une variante de la technique body {} à html, body{} déjà mentionnée, mais montre que vous pouvez vous contenter du style en HTML ), par exemple.
body {
background-color:#000000;
background-image:url('images/bg.png');
background-repeat:repeat-x;
font-family:Arial,Helvetica,sans-serif;
font-size:85%;
color:#cccccc;
}
devient
html {
background-color:#000000;
background-image:url('images/bg.png');
background-repeat:repeat-x;
}
body {
font-family:Arial,Helvetica,sans-serif;
font-size:85%;
color:#cccccc;
}
Cela a fonctionné dans IE6-8, Chrome 4-5, Safari 4, Opera 10 et Firefox 3.x sans effets secondaires évidents.
HTML et la hauteur du corps 100% ne fonctionne pas dans les anciennes versions IE.
Vous devez déplacer les propriétés d'arrière-plan de l'élément body vers l'élément html.
Cela corrigera crossbrowser.
J'ai pu résoudre ce problème avec:
html { height: 100%; }
Après avoir essayé toutes les autres solutions ici sans succès, j'ai essayé avec scepticisme la solution trouvée dans cet article , et je l'ai fait fonctionner.
En gros, il s’agit de supprimer @charset "utf-8"; de votre CSS.
Cela semble être une mauvaise mise en œuvre dans DreamWeaver - mais cela a résolu le problème pour moi, peu importe.
Solution simple et correcte - définissez l’image d’arrière-plan et la couleur en HTML, pas en corps. Sauf si vous avez défini une hauteur spécifique (et non un pourcentage) dans le corps, sa hauteur sera supposée être aussi haute que nécessaire pour contenir tout le contenu. votre style d'arrière-plan doit donc aller en HTML, qui est le document HTML entier, pas seulement le corps. Simples.
J'ai eu la même chose dans les navigateurs Chrome et Safari aka Webkit. Je soupçonne que ce n'est pas un bug, mais l'utilisation incorrecte de CSS qui «casse» l'arrière-plan.
Dans la question ci-dessus, la propriété background body est définie sur:
background: black;
Ce qui est bien, mais pas tout à fait correct. Il n'y a pas de fond d'image, donc ...
background-color: black;
Adam's chromeFix solution avec Paul Alexander's pure-CSS modification a résolu le problème dans Chrome , mais pas dans Safari . Quelques modifications supplémentaires ont également résolu le problème dans Safari: width: 100% et z-index:-1 (ou une autre valeur négative appropriée qui place cet élément derrière tous les autres éléments de la page).
Le CSS:
body:after {display:block; position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:-1; content: "";}
Je voudrais essayer ce que Logan et 1mdm ont suggéré, que Tweak le CSS, mais j'attendrais vraiment qu'une nouvelle version de Chrome sorte avec des bugs corrigés, avant de faire pousser des cheveux blancs.
À mon humble avis, la version actuelle de Chrome est toujours la version alpha et a été publiée pour pouvoir se répandre en cours de développement. J'ai personnellement eu des problèmes avec les largeurs de table, mon code a bien fonctionné dans TOUS les navigateurs, mais ne pouvait pas le faire fonctionner dans Chrome.
Google Chrome et Safari ont besoin d'un Tweak pour les problèmes de corps et d'arrière-plan ..__ Nous avons utilisé l'identifiant supplémentaire mentionné ci-dessous.
<style>
body { background:#204960 url(../images/example.gif) repeat-x top; margin:0; padding:0; font-family:Tahoma; font-size:12px; }
#body{ background:#204960 url(../images/example.gif) repeat-x top; margin:0; padding:0; font-family:Tahoma; font-size:12px;}
</style>
<body id="body">
Utilisez les identifiants body et #body et entrez les mêmes styles dans les deux ..___. Créez la balise body avec l'attribut id de body.
Cela fonctionne pour moi.
Je ne suis pas sûr à 100%, mais essayez de remplacer le sélecteur par "html, body":
html, body
{
background: black;
color: white;
font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}
Tout le monde a dit que votre code allait bien et vous savez que cela fonctionne sans problème sur les autres navigateurs. Il est donc temps de laisser tomber la science et d'essayer des trucs :)
Essayez de mettre la couleur de fond DANS la balise body elle-même au lieu de/as-well-as dans le CSS. Peut-être insister à nouveau (de manière redondante) en Javascript À un moment donné, Chrome devra placer l'arrière-plan comme vous le souhaitez à chaque fois. Peut-être une question de timing-interprétating ...
[Si cela vous convient, vous pouvez bien sûr basculer l'utilisateur côté serveur pour que le code amusant n'apparaisse que dans Chrome. Et dans quelques mois, lorsque Chrome aura changé et que le problème disparaîtra ... eh bien, inquiète-toi plus tard.]
Lorsque vous créez un style CSS à l'aide de Dreamweaver pour la conception Web, Dreamweaver ajoute un code par défaut, tel que
@charset “utf-8″;Essayez de le supprimer de votre feuille de style, l’image ou la couleur d’arrière-plan devrait s’afficher correctement.
Je suis sûr que c'est un bug dans Chrome. Cela se produira probablement si vous redimensionnez le navigateur en mode plein écran, puis changez d'onglet. Et parfois, si vous changez simplement d’onglet/ouvrez-en un nouveau. Cela fait plaisir d'entendre que vous avez trouvé une "solution" si.
Voici comment j'ai fini par résoudre le problème:
C’était là le problème, il est clair que la balise body définie dans CSS n’a pas été détectée.
Mon environnement: navigateur Chrome/Safari,
C'est la première fois que cela ne fonctionne pas. Donc, conformément à la recommandation de thread ici, j'ai fini par ajouter le fichier css avec l'entrée html.
Exemple de fichier CSS: mystyle.css
<style type="”text/css”">
html {
background-color:#000000;
background-repeat:repeat-x;
}
body {
background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
}
</style>
Exemple de fichier html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.6), see www.w3.org">
<title>Test Html File</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
<body>
<h1>Achieve sentence with Skynet! READ MORE</a></h1>
</body>
</html>
Après le premier chargement, cela fonctionnera dans Chrome, puis reviendra dans le fichier CSS commenter l’entrée html, ainsi votre CSS modifié sera
<style type="”text/css”">
// html {
// background-color:#000000;
// background-image:url('bg.png');
// background-repeat:repeat-x;
// }
body {
background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
}
</style>
Apparemment, il semble y avoir un bogue dans webkit, vu le même comportement dans Safari. Merci de partager les informations html, expliquez depuis toujours pourquoi la balise body ne fonctionnait pas.
La sortie finale ressemble à ceci:
Ma feuille de style en cascade utilisée:
body {background-color: #FAF0E6; font-family: arial, sans-serif }
Cela a fonctionné dans Internet Explorer mais a échoué dans Firefox et Chrome. Je l'ai changé pour:
body {background: #FAF0E6; font-family: arial, sans-serif }
(c'est-à-dire que j'ai supprimé -color.)
Cela fonctionne dans les trois navigateurs. (J'ai dû redémarrer Chrome.)
Il doit s'agir d'un problème WebKit , comme dans Safari 4 et Chrome.
SI vous rencontrez toujours des problèmes, vous pouvez essayer de passer de haut en bas dans chromeFix ci-dessus, ainsi que d'un div plutôt que d'un span
<div id="chromeFix"></div>
style:
#chromeFix { display: block; position: absolute; width: 1px; height: 100%; bottom: 0px; left: 0px; }
Bizarrement, cela ne se produit pas à toutes les pages et cela ne semble pas toujours fonctionner même après actualisation.
Ma solution a été d’ajouter aussi {height: 100%;}.
body, html {
width: 100%;
height: 100%;
}
Travaillé pour moi :)
Je vois aussi ce problème avec Chrome. Si je me souviens bien, si vous réduisez puis agrandissez votre fenêtre, elle le corrige également?
Je n'ai pas trop utilisé Chrome depuis sa sortie, mais je le blâme assurément pour Google, car le code que je vérifiais était très étanche.