Why is Chrome loading my HTML in a “pre” tag?

问题

I have a very basic web page that I'm loading with an Arduino Server. When I view the page on Safari, everything works fine and looks good when I use the inspector. But when I load it on Chrome (version 39.0.2), it wraps all of my HTML in a "pre" tag which prevents my webpage from loading (I've attached screenshots showing the Inspector output). It also moves all of my code out of the "head" tag and into the "body" tag. First, here is my HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>



    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

         <!-- LOAD THE JSON DATA -->
              <script type="text/javascript" src="data.txt"></script>
              <link rel="stylesheet" type="text/css" href="home.css">
              <script src="home.js" type="text/javascript"></script>




        <title>CANARI JR. | Home</title>

    </head>


<body onload="preparePage()">

<div id="container">


    <div id="headerDiv">

        <div id="logoDiv"><a href="/">
         <img src="cLogo.png"> 
        </div></a>





     </div>



<div id="contentDiv">


</div>



</div>
    </body>
</html>

Now when I inspect my page, I see this:

And it wraps around all my HTML and actually closes the tag outside of my body and html tag!

Anyone see what is going wrong here in Chrome?

Edit 1 - I am using an Arduino Ethernet Shield to host and load this page from an SD card. (It works perfectly on Safari, so I'm thinking there's something in my code and not an issue with Arduino).

Edit 2 - I've attached screenshot of the Google Chrome Inspector (sorry - copy and pasting replaced a lot of the characters, so I went screenshot route http://i.stack.imgur.com/d09k8.png

Edit 3 - Added "Network" Tab from Chrome Inspector http://i.stack.imgur.com/zL7L1.png

回答1:

According to your sceenshots the page is delivered with the Content-type: text/plain header. This leads chrome to display it in a pre tag as it assumes you want to view the HTML as text. Your webserver needs to write a proper Content-type header.

An example of how to write headers using the arduino ethernet shield can be found here.

Contrary to the code linked above, you should determine the content-type dynamically, using something like the file extension. So that images are transferred with the correct content-type(for example image/jpg) aswell.

回答2:

Add Dependency to your POM

<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<scope>provided</scope>
</dependency>

来源：https://stackoverflow.com/questions/27914693/why-is-chrome-loading-my-html-in-a-pre-tag

标签

javascript

html

google-chrome

arduino