2012-05-22 15 views
7

Al navegar por mi sitio web con la última versión de Google Chrome y usar F12 para buscar en la fuente, todo el contenido entre <head> y </head> aparece vacío. En las últimas versiones de Firefox y IE, todo parece correcto.<head> aparece vacío en Chrome

En realidad, el contenido se traslada al cuerpo en google Chrome.

Obviamente no es un problema de CSS. Estoy usando Twitter Bootstrap CSS y JS, y un framework MVC PHP. Alguien tiene una pista?

Aquí está mi página document.html:

<!DOCTYPE html> 
<html lang="fr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

<title><?php echo (Template::$titre); ?></title> 

<?php foreach(Template::$meta as $key=>$value): ?> 
     <meta name="<?php echo $key; ?>" content="<?php echo $value; ?>" /> 
<?php endforeach; ?> 

<link rel="shortcut icon" href="<?php echo WEB; ?>assets/style/favicon.ico" type="image/x-icon" /> 

<link rel="stylesheet" href="<?php echo WEB; ?>assets/style/bootstrap.min.css" /> 
<link rel="stylesheet" href="<?php echo WEB; ?>assets/style/bootstrap-responsive.min.css" />  
<link rel="stylesheet" href="<?php echo WEB; ?>assets/style/main.css" />  
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> 

<!--[if lt IE 9]> 
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
</head> 
<body> 
<?php require Template::child(); ?> 
(...) 

Y la fuente vistos por Firebug:

<html lang="fr"><head></head><body>? 


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

<title>Veloccasion - Vélos d'occasion dans toute la France</title> 
<meta name="keywords" content="velos d'occasion, velos dans toute la France, velos occasion Toute la france, velo occasion, velo"> 
<meta name="description" content="Petites annonces de velos d'occasion dans toute la France, velo d'occasion à vendre Toute la france"> 
<meta name="author" content="Veloccasion"> 

<link rel="shortcut icon" href="/assets/style/favicon.ico" type="image/x-icon"> 

<link rel="stylesheet" href="/assets/style/bootstrap.min.css"> 
<link rel="stylesheet" href="/assets/style/bootstrap-responsive.min.css"> 
<link rel="stylesheet" href="/assets/style/main.css"> 
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> 

<!--[if lt IE 9]> 
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 


<section id="maincontainer"> 
<div class="container"> 
(...) 

Editar: Problema resuelto, Notepad ++ era codificación en UTF8, he cambiado a ANSI y funcionó bien

+0

Probablemente se deba a que su código no se cerró '' correctamente, ¿podría publicar el resultado de origen visto (en lugar de código php)? –

+0

Me parece bien: http://imgur.com/Y3anC –

+0

@NiftyDude '' se cierra correctamente en el código que no es PHP en el OP. –

Respuesta

5

Tiene algún tipo de carácter malformado al principio de su documento.

me corrieron de su página a través del validador del W3C y se nota:

error Línea 1, Columna 1: Los caracteres no-espaciales que se encuentran sin ver a un tipo de documento primero. Esperado <!DOCTYPE html>.

http://validator.w3.org/check?uri=http%3A%2F%2Fveloccasion.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Ésta parece ser la causa de Chrome para soltar su tipo de documento y hacer que la página en el modo no estándar, como se puede ver por los botones y campos de texto alturas divertidos. Intente eliminar cualquier cosa extraña antes de DOCTYPE (o eliminar DOCTYPE y volver a escribirlo)

+2

O podría ser la estúpida lista de materiales Unicode. Asegúrese de que sus archivos estén guardados como UTF8 Sin BOM. – Okonomiyaki3000

+0

¡Bien, problema resuelto! En realidad estoy usando Notepad ++ y estaba guardando la página en codificación UTF8. Cambié a ANSI y reescribí '' y funcionó bien. Gracias ! – PhilMarc

+0

No use ANSI, use UTF8 sin BOM. BOM es una mala noticia, nunca la uses. – Okonomiyaki3000

0

F12 no se ve la fuente. F12 es el inspector dom. ¿Es posible que solo veas que la cabeza está colapsada? Esta es la forma en que se muestra por defecto.

Editar:

encontrado su problema:

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> 

esa etiqueta no se cierra. Es necesario acabar con ella con />

Editar:

Podría ser que necesita un espacio antes /> en esta línea:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
+0

No, doblo verificado, no se colapsó, está realmente vacío, y puede ver que se muestra mal en Chrome. Además comprobé con Google Page Speed ​​y dice que debo poner el CSS en la cabeza, y también definir Charset en la cabeza, en lugar del cuerpo – PhilMarc

+0

Bueno, no veo qué tiene que ver eso con nada. ¿Su sitio tiene una URL? – Okonomiyaki3000

+0

No importa, lo encontré. – Okonomiyaki3000

1

Para construir sobre la respuesta de Elías, utilice CTRL + T para ver fuente en cromo y firefox.

Acabo de comprobar en cromo y NO está vacío.

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

<title>Veloccasion - V&eacute;los d'occasion dans toute la France</title> 
<meta name="keywords" content="velos d'occasion, velos dans toute la France, velos occasion Toute la france, velo occasion, velo" /> 
<meta name="description" content="Petites annonces de velos d'occasion dans toute la France, velo d'occasion &agrave; vendre Toute la france" /> 
<meta name="author" content="Veloccasion.net" /> 

<link rel="shortcut icon" href="/assets/style/favicon.ico" type="image/x-icon" /> 

<link rel="stylesheet" href="/assets/style/bootstrap.min.css" />  
<link rel="stylesheet" href="/assets/style/bootstrap-responsive.min.css" /> 
<link rel="stylesheet" href="/assets/style/main.css" /> 
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> 

<!--[if lt IE 9]> 
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

+0

¿Pero puede ver el espacio en blanco en la parte superior cuando navega con Chrome? Y la barra de desplazamiento doble a la derecha. – PhilMarc

+0

sí, solo en cromo .... muy extraño –

-1

creo que sirve

la línea de abajo

<link href="http://fonts.googleapis.com/css?family=Lobster" 
rel="stylesheet" type="text/css 

Aviso el "?" en él intente eliminar esta línea y ver fuente

+0

Esa línea es el problema pero no hay nada malo con el '?' – Okonomiyaki3000

+0

Utilice comillas dobles para esa línea –

+0

Sí, utilice comillas dobles. Pero ese tampoco es el problema real. – Okonomiyaki3000

0

¡Lo encontré!

En prensa cromo Ctrl + Mayús + I,

... justo después de la etiqueta <body> hay una línea de gran cantidad de texto en blanco. encuentra eso y bórralo y el espacio en blanco desaparece. No estoy seguro de lo que está causando porque no tengo tu código.

+0

El HTML es exactamente como lo pegué en la pregunta: sin espacios en blanco, sin espacios, revisé todo. Me registraré en el marco de php. – PhilMarc

+0

Lo siento, pero no lo es. Definitivamente hay un gran espacio en blanco que es lo que ves. No sé por qué solo está en cromo, pero está allí. Pude verlo en las herramientas de desarrollador (ctrl + shift + i) justo después de la etiqueta de cuerpo. Cuando lo quité, el espacio en blanco desapareció. Entonces, creo que probablemente sea un problema de PHP que debes investigar. –

+0

Creo que el espacio en blanco que ve es agregado por Chrome en las herramientas de desarrollo solamente, ya que hay algo más defectuoso con el código. Tengo el mismo problema. – cederlof

Cuestiones relacionadas