问题
When browsing my website with last version of Google Chrome, and using F12 to look into the source, all the content between <head> and </head> appears empty.
On last versions of Firefox and IE, everything appears correcyly.
Actually the content is moved into the body on google Chrome.
It's obviously not a CSS problem. I'm using Twitter Bootstrap CSS and JS, and a MVC PHP framework. Someone has a hint?
Here is my document.html page:
<!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(); ?>
(...)
And the viewed source by 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>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">
<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">
(...)
Edit : Problem solved, Notepad++ was encoding in UTF8, I changed to ANSI and worked fine.
回答1:
You have some sort of malformed character at the start of your document.
I ran your page through the W3C validator and it shows:
Error Line 1, Column 1: Non-space characters found without seeing a doctype first. Expected
<!DOCTYPE html>.
http://validator.w3.org/check?uri=http%3A%2F%2Fveloccasion.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
This appears to be causing Chrome to drop your doctype and render the page in Quirks mode, as you can see by the funny button and text field heights. Try deleting anything weird before the DOCTYPE (or removing the DOCTYPE and re-typing it)
回答2:
To build on Elijah's answer, use CTRL+U to view source on chrome and firefox.
I just checked on chrome and it is NOT empty.
<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é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.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]-->
回答3:
F12 is not view source. F12 is the dom inspector. Is it possible that you're just seeing the head as collapsed? This is the way it's shown by default.
Edit:
Found your problem:
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
That tag doesn't close. You need to end it with />
Edit:
Could it be that you need a space before /> on this line:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
回答4:
I found it!
In chrome press CTRL+SHIFT+I,
...right after the <body> tag there is a line of lots of blank text. find that, and delete it and the whitespace goes away. Not sure what's causing it because I don't have your code.
回答5:
Hope it helps
the line below
<link href="http://fonts.googleapis.com/css?family=Lobster"
rel="stylesheet" type="text/css
Notice the "?" in it try removing this line and view source
来源：https://stackoverflow.com/questions/10695620/head-appears-empty-in-chrome