يظهر <head> فارغًا في Chrome

StackOverflow https://stackoverflow.com//questions/10695620

سؤال

عند تصفح موقع الويب الخاص بي باستخدام الإصدار الأخير من Google Chrome، واستخدام F12 للبحث في المصدر، كل المحتوى بينهما <head> و </head> يبدو فارغا.في الإصدارات الأخيرة من Firefox وIE، يظهر كل شيء بشكل صحيح.

في الواقع، يتم نقل المحتوى إلى النص الأساسي في Google Chrome.

من الواضح أنها ليست مشكلة CSS.أنا أستخدم Twitter Bootstrap CSS وJS وإطار عمل MVC PHP.شخص ما لديه تلميح؟

هذه هي صفحة 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(); ?>
(...)

والمصدر الذي شاهدته 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">
(...)

يحرر :تم حل المشكلة، تم ترميز برنامج Notepad++ باستخدام UTF8، وقمت بالتغيير إلى ANSI وعملت بشكل جيد.

هل كانت مفيدة؟

المحلول

لديك نوع من الأحرف المشوهة في بداية المستند.

لقد قمت بتشغيل صفحتك من خلال أداة التحقق من صحة W3C وهي تظهر:

سطر الخطأ 1، العمود 1:تم العثور على شخصيات غير مساحة دون رؤية Doctype أولاً.مُتوقع <!DOCTYPE html>.

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

يبدو أن هذا يتسبب في قيام Chrome بإسقاط نوع المستند الخاص بك وعرض الصفحة في وضع Quirks، كما ترون من خلال الزر المضحك وارتفاعات حقل النص.حاول حذف أي شيء غريب قبل DOCTYPE (أو إزالة DOCTYPE وإعادة كتابته)

نصائح أخرى

للبناء على إجابة إيليا، استخدم CTRL + U لعرض المصدر على الكروم وفايرفوكس.

لقد قمت للتو بالتحقق من الكروم وهو ليس فارغًا.

<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]-->

F12 لا يظهر المصدرF12 هو مفتش دوم.هل من الممكن أنك ترى الرأس منهارًا فحسب؟هذه هي الطريقة التي تظهر بها بشكل افتراضي.

يحرر:

وجدت مشكلتك:

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

هذه العلامة لا تغلق.تحتاج إلى إنهاء الأمر مع />

يحرر:

هل من الممكن أنك تحتاج إلى مساحة من قبل /> على هذا الخط:

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

لقد وجدت ذلك!

في الكروم اضغط على CTRL+SHIFT+I،

... مباشرة بعد <body> العلامة هناك سطر من الكثير من النص الفارغ.ابحث عن ذلك واحذفه وستختفي المسافة البيضاء.لست متأكدًا من سبب ذلك لأنني لا أملك الرمز الخاص بك.

نأمل أن يساعد

الخط أدناه 

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

لاحظ ال "؟" في ذلك ، حاول إزالة هذا الخط وعرض المصدر

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top