Problème avec la couleur d'arrière-plan et Google Chrome
https://stackoverflow.com/questions/425216
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Parfois, l'arrière-plan de Chrome est endommagé. Je ne reçois pas cette erreur avec un autre navigateur.
Il s'agit de la simple ligne CSS responsable de la couleur d'arrière-plan du corps:
body
{
background: black;
color: white;
font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}
C’est exactement ainsi que j’ai eu ce problème. Je clique sur un lien inclus dans l'e-mail d'un compte Gmail et j'obtiens un problème (sans arrière-plan). J'actualise ensuite la page et l'arrière-plan est entièrement coloré.
Comment résoudre ce problème?
La solution
Jamais entendu parler de cela. Essayez:
html, body {
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
font-family: ...;
}
Autres conseils
Ok les gars, j'ai trouvé une solution , . Ce n'est pas génial, mais fait le tour sans effets secondaires.
Le code HTML:
<span id="chromeFix"></span>
(mettez ceci sous les balises body)
Le CSS:
#chromeFix { display: block; position: absolute; width: 1px; height: 100%; top: 0px; left: 0px; }
Ce que cela apporte 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. Cela correspond essentiellement à ce que height: 100% fait lorsqu'il est appliqué au corps ou au code HTML, mais vous n'obtenez pas l'effet secondaire de couper vos arrière-plans lorsque vous faites défiler (au-delà de 100% la hauteur de la page). faire avec une hauteur de 100% sur ces éléments.
Je peux dormir maintenant =]
J'ai eu 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 du body {} vers html, la technique body {} déjà mentionnée mais montre que vous pouvez vous contenter du style en HTML uniquement), 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 fonctionnait dans IE6-8, Chrome 4-5, Safari 4, Opera 10 et Firefox 3.x sans effets secondaires désagréables.
J'ai pu résoudre ce problème avec:
html { height: 100%; }
Le HTML et la hauteur de corps 100% ne fonctionnent pas dans les anciennes versions d'IE.
Vous devez déplacer les propriétés d'arrière-plan de l'élément body vers l'élément html.
Cela résoudra le problème de crossbrowser.
Simple, correct, solution - définissez l'image de fond 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 grande 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.
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 l'a fait fonctionner.
En gros, il s’agit de supprimer @charset "quotf-8" " ;;; de votre code CSS.
Cela semble être une mauvaise implémentation dans DreamWeaver - mais cela a résolu le problème pour moi, peu importe.
Je ne suis pas certain à 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;
}
Je voudrais essayer ce que Logan et 1mdm ont suggéré, peaufiner le CSS, mais j'attendrais vraiment qu'une nouvelle version de Chrome sorte avec des bugs corrigés, avant de laisser pousser les cheveux blancs.
À mon humble avis, la version actuelle de Chrome est toujours une version alpha et a été publiée pour pouvoir se répandre en cours de développement. Personnellement, j'avais des problèmes de largeur de table, mon code fonctionnait bien dans TOUS les navigateurs, mais ne pouvait pas fonctionner sous Chrome.
Google Chrome et Safari nécessitent un ajustement 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.
d'Adam chromeFix avec la modification pure-CSS de Paul Alexander 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 tout 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: "";}
J'avais la même chose dans les navigateurs Web et Chrome de Safari. 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;
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 tiens à blâmer Google, car le code que je vérifiais était étanche à l'air.
Tout le monde a dit que votre code fonctionnait 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 choses :)
Essayez de mettre la couleur d’arrière-plan DANS la balise body elle-même au lieu de / as-well-as dans le code 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. Cela pourrait être un problème d’interprétation du temps ...
[Si tout ceci fonctionne, bien sûr, vous pouvez le basculer côté serveur afin 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étez-vous pour cela plus tard.]
Il doit s'agir d'un problème WebKit , comme dans Safari 4 et Chrome.
Je suis à peu près sûr qu'il s'agit d'un bogue dans Chrome. Cela se produira probablement si vous redimensionnez le navigateur en mode plein écran, puis changez d'onglet. Et parfois, si vous changez d'onglet / ouvrez-en un nouveau. Cela fait plaisir d'entendre que vous avez trouvé un "correctif". bien que.
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 supprimer cela de votre feuille de style, l'image ou la couleur d'arrière-plan devrait s'afficher correctement
body, html {
width: 100%;
height: 100%;
}
A travaillé pour moi:)
Voici comment j'ai fini par résoudre le problème:
Tel était 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,
Pour la première fois, quand cela ne fonctionne pas, j'ai donc ajouté le fichier CSS avec l'entrée html, conformément à la recommandation de thread ici
.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 revenez dans le fichier CSS commentez l'entrée html. Votre CSS modifié sera donc
.<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>
semble clairement être un bogue dans webkit, a également observé le même comportement dans Safari. Merci de partager les informations html, je cherche depuis toujours pourquoi la balise body ne fonctionne pas
Le résultat final ressemble à ceci:
Curieusement, cela ne se produit pas à toutes les pages et cela ne semble pas toujours fonctionner même après actualisation.
Ma solution consistait également à ajouter {hauteur: 100%;} .
Ma feuille de style en cascade utilisée:
body {background-color: #FAF0E6; font-family: arial, sans-serif }
Cela fonctionnait dans Internet Explorer mais échouait dans Firefox et Chrome. Je l'ai changé pour:
body {background: #FAF0E6; font-family: arial, sans-serif }
(c'est-à-dire que j'ai supprimé -couleur .)
Cela fonctionne dans les trois navigateurs. (Je devais redémarrer Chrome.)
Si vous rencontrez toujours des problèmes, vous pouvez essayer de remplacer "top" par "bottom" dans chromeFix ci-dessus, ainsi qu'un div plutôt qu'un span
<div id="chromeFix"></div>
style:
#chromeFix { display: block; position: absolute; width: 1px; height: 100%; bottom: 0px; left: 0px; }
