css - paginas - plugin para cambiar colores wordpress
Problema con el color de fondo y Google Chrome (22)
Cuando crea un estilo CSS con Dreamweaver para el diseño web, Dreamweaver agrega un código predeterminado como
@charset “utf-8″;Intente eliminar esto de su hoja de estilo, la imagen de fondo o el color deberían mostrarse correctamente
A veces obtengo un fondo roto en Chrome. No entiendo este error con ningún otro navegador.
Esta es la línea de CSS simple responsable del color de fondo del cuerpo:
body
{
background: black;
color: white;
font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}
Así es exactamente como consigo este problema. Hago clic en un enlace incluido en el correo electrónico de Gmail y me sale algo mal (sin fondo). Luego, actualizo la página y el fondo está completamente coloreado.
¿Cómo arregla este problema?
Aquí es cómo terminé resolviendo el problema:
Este fue el problema real, claramente la etiqueta corporal definida en CSS no se recogió.
Mi entorno: Chrome Browser / Safari,
La primera vez cuando no funciona, así que de acuerdo con la recomendación de hilo aquí terminé agregando el archivo css con la entrada html
Ejemplo de archivo 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>
Muestra de archivo 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>
Después de la primera carga, funcionará en Chrome y luego volverá al archivo CSS para comentar la entrada html, por lo que su CSS modificado será
<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>
Claramente parece ser un error en webkit, vio el mismo comportamiento en Safari también. Gracias por compartir la información html, he estado buscando por siempre de por qué la etiqueta del cuerpo no funcionaba.
El resultado final es algo como esto:
Bien chicos, encontré una solución,. No es genial, pero funciona sin efectos secundarios.
El HTML:
<span id="chromeFix"></span>
(Pon esto debajo de las etiquetas del cuerpo)
El CSS:
#chromeFix { display: block; position: absolute; width: 1px; height: 100%; top: 0px; left: 0px; }
Qué hace esto para resolver el problema:
Obliga a Chrome a pensar que el contenido de la página es 100% cuando no lo es: esto evita que el cuerpo "aparezca" en el tamaño del contenido y resuelve el error de fondo que falta. Esto es básicamente hacer qué height: 100% hace cuando se aplica al cuerpo o html pero no obtienes el efecto secundario de tener tus fondos cortados cuando se desplaza (más allá de la altura del 100% de la página) como lo haces con una altura del 100% esos elementos.
Puedo dormir ahora =]
Debe ser un problema de WebKit como lo es tanto en Safari 4 como en Chrome.
Después de probar todas las otras soluciones aquí sin éxito, probé con escepticismo la solución que se encuentra en este artículo y lo puse a funcionar.
Esencialmente, se reduce a eliminar @charset "utf-8"; de tu CSS.
Esto parece una implementación deficiente en DreamWeaver, pero solucionó el problema para mí, independientemente.
El HTML y la altura del cuerpo al 100% no funcionan en las versiones anteriores de IE.
Tienes que mover las propiedades de fondo del elemento del cuerpo al elemento html.
Eso lo arreglará con navegador cruzado.
Estoy bastante seguro de que esto es un error en Chrome. Lo más probable es que suceda si cambia el tamaño del navegador a pantalla completa, luego cambia las pestañas. Y a veces, si cambias de pestaña / abres una nueva. Aunque es bueno saber que encontraste una "solución".
Google Chrome y safari necesitan un ajuste para problemas de cuerpo y fondo. Hemos usado un identificador adicional como se menciona a continuación.
<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">
Use el identificador body y #body e ingrese los mismos estilos en ambos. Haz la etiqueta del cuerpo con el atributo id del cuerpo.
Esto funciona para mí
La solución chromeFix de Adam con la modificación de CSS puro de Paul Alexander resolvió el problema en Chrome , pero no en Safari . Un par de ajustes adicionales también resolvieron el problema en Safari: width: 100% e z-index:-1 (o algún otro valor negativo apropiado que coloca este elemento detrás de todos los otros elementos en la página).
El CSS:
body:after {display:block; position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:-1; content: "";}
Mi hoja de estilos en cascada utilizada:
body {background-color: #FAF0E6; font-family: arial, sans-serif }
Funcionó en Internet Explorer pero falló en Firefox y Chrome. Lo cambié a:
body {background: #FAF0E6; font-family: arial, sans-serif }
(es decir, -color )
Funciona en los tres navegadores. (Tuve que reiniciar Chrome).
No estoy seguro al 100%, pero intente reemplazar el selector con "html, body":
html, body
{
background: black;
color: white;
font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}
Nunca lo oí. Tratar:
html, body {
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
font-family: ...;
}
Por extraño que parezca, en realidad no sucede en todas las páginas y no parece funcionar siempre, incluso cuando se actualiza.
Mis soluciones fueron agregar {height: 100%;} también.
Probaría lo que Logan y 1mdm sugirieron, pero modifique el CSS, pero realmente esperaría que una nueva versión de Chrome salga con errores solucionados, antes de que crezca el pelo blanco.
En mi humilde opinión, la versión actual de Chrome sigue siendo una versión alfa y se lanzó para que pueda propagarse mientras está en desarrollo. Personalmente tenía problemas con el ancho de las tablas, mi código funcionaba bien en TODOS los navegadores pero no podía hacerlo funcionar en Chrome.
Pude arreglar esto con:
html { height: 100%; }
SI aún tiene problemas, puede intentar cambiar ''arriba'' a ''abajo'' en chromeFix arriba, y también un div en lugar de un lapso
<div id="chromeFix"></div>
estilo:
#chromeFix { display: block; position: absolute; width: 1px; height: 100%; bottom: 0px; left: 0px; }
Solución simple, correcta: defina la imagen de fondo y el color en html, no en el cuerpo. A menos que haya definido una altura específica (no un porcentaje) en el cuerpo, se asumirá que su altura será tan alta como sea necesario para contener todo el contenido. por lo que el diseño de fondo debe ir a html, que es todo el documento html, no solo el cuerpo. Simples.
También he visto este problema con Chrome, si no recuerdo mal si minimizas y luego maximizas tu ventana, ¿lo arregla también?
Realmente no he usado demasiado Chrome desde que se lanzó, pero esto definitivamente es algo que culpo a Google ya que el código que estaba verificando era hermético.
Tenía lo mismo en los navegadores Chrome y Safari aka Webkit. Sospecho que no es un error, sino el uso incorrecto de css que ''rompe'' el fondo.
En la Pregunta anterior, la propiedad de fondo del cuerpo está configurada para:
background: black;
Lo cual está bien, pero no del todo correcto. No hay fondo de imagen, por lo tanto ...
background-color: black;
Todo el mundo ha dicho que su código está bien, y usted sabe que funciona en otros navegadores sin problemas. Así que es hora de dejar la ciencia y probar cosas :)
Intente poner el color de fondo EN la etiqueta del cuerpo en lugar de / tan bien como en el CSS. Quizás insista de nuevo (redudantly) en Javascript. En algún momento, Chrome tendrá que colocar el fondo como quieras siempre. Podría ser un problema de interpretación de tiempo ...
[En caso de que alguno de estos trabajos, por supuesto, puede alternarlos en el lado del servidor para que el código divertido solo aparezca en Chrome. Y en unos meses, cuando Chrome haya cambiado y el problema desaparezca ... bueno, preocúpate por eso más tarde.]
Tuve el mismo problema en un par de sitios y lo solucioné moviendo el estilo de fondo del cuerpo a html (que supongo que es una variación de la técnica body {} a html, body{} ya mencionada, pero muestra que puedes hacer con el estilo solo en html), por ejemplo
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;
}
se convierte
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;
}
Esto funcionó en IE6-8, Chrome 4-5, Safari 4, Opera 10 y Firefox 3.x sin evidentes efectos secundarios desagradables.
body, html {
width: 100%;
height: 100%;
}
Trabajó para mi :)