8

最新バージョンのGoogleChromeでウェブサイトを閲覧し、F12を使用してソースを調べると、との間のすべてのコンテンツが空<head>で表示されます。</head>FirefoxとIEの最新バージョンでは、すべてが正しく表示されます。

実際、コンテンツはグーグルクロームの本文に移動されます。

それは明らかにCSSの問題ではありません。Twitter Bootstrap CSSとJS、およびMVCPHPフレームワークを使用しています。誰かがヒントを持っていますか？

これが私の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に変更して、正常に動作しました。

4

5 に答える 5

6

ドキュメントの先頭に、ある種の不正な文字があります。

あなたのページを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がDoctypeを削除し、ページをQuirksモードでレンダリングしているようです。DOCTYPEの前に奇妙なものを削除してみてください（またはDOCTYPEを削除して再入力してください）

于 2012-05-22T04:49:10.723 に答える
2

エリヤの答えに基づいて構築するには、CTRL+Uを使用してchromeとfirefoxのソースを表示します。

Chromeをチェックしたところ、空ではありません。

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

于 2012-05-22T04:21:10.423 に答える
1

F12はビューソースではありません。F12はDOMインスペクターです。頭が崩れているのを見ているだけでいいのでしょうか？これは、デフォルトで表示される方法です。

編集：

問題が見つかりました：

    <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"/>
于 2012-05-22T04:18:01.843 に答える
1

見つけた！

Chromeで、CTRL + SHIFT+Iを押します。

...タグの直後に<body>たくさんの空白のテキストがあります。それを見つけて削除すると、空白がなくなります。あなたのコードがないので、何が原因なのかわかりません。

于 2012-05-22T04:45:59.540 に答える
-1

それが役に立てば幸い

下の行

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

「？」に注意してください その中で、この行を削除してソースを表示してみてください

于 2012-05-22T04:26:30.977 に答える