Question

我最近在我的网站上添加了一个电子邮件表单。所有工作都适用于Safari，Chrome和IE 10.将我的文件上传到服务器后，实时网站缺少样式。该网站应该看起来像https://drive.google.com/file/d/0B-3ueJyncJ7eTGY3OHVtQmR3bUE/view?usp=sharing，但它看起来像https://drive.google.com/file/d/0B-3ueJyncJ7eeThZcEhzMWpPMnM/view?usp=sharing

<!doctype html>
<html>
<head>
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<title>CloudHudl</title>
<link href="Landing_styles.css" rel="stylesheet" type="text/css">
</head>                                                          
<body style="margin: 0; padding: 0">
    <header>
          <div id= "logo"></div>
    </header>

    <div class="Organge">
    <div id= "UltimateGame">
    ULTIMATE GAME DEVELOPMENT PLATFORM
    </div>
    <div id= "CloudHudlis">
    CloudHudl is a platform for developers, artist and producers.
    </div>
    <div id= "ConnectandForm">
    Connect and Form Develpment Teams
    </div>
    <div id= "CreateandDevelop">
    Create and Develop Games Through the Web
    </div>
    <div id="WePublish">
    We Publish Your Games!
    </div>
    </div>
<div id= "StayInformed">
      STAY INFORMED
    </div>
    <div id="About">
        We are creating a platform for developers, artist, and producers from all walks of life. Our platform gives people with an idea the ability to connect with talented individuals from
        across the globe. Project management, file sharing and collaboration, and development are simple to run on CloudHudl. In addition, our publishing services for games gives producers’ 
        complete creative freedom, so they can create the content they want to create. Our platform allows talented producers and designers to create unhindered projects of any size, from 
        anywhere in the world and provides the opportunity for any project to succeed, not just exist. If you’re a developer, producer, artist, coder, or just interested in getting involved, 
        fill out our form below to stay up to date and receive a notification before our launch date.
     </div>
<div class= "Grey">
    </div>
    <div id= "bubble">
    </div>
    <div id= "sheet">
    </div>
    <div id= "controller">
    </div>       
    <!-- Sign-up -->
<div id="mc_embed_signup">
<form action="//cloudhudl.us11.list-manage.com/subscribe/post?u=e31b06ffc35cb8b0ebaa0081b&amp;id=79f3fa778c" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--end signup--> 
    <footer>
      <address>
        Copyright 2015 &#169;
        (620) 605-2154;
      </address>
    </footer>
</body>
</html>


/* 
  Cloud Hudl
  Index stylesheet

  Author: Cameron Hall
  Date: 9/25/2015
  Filename: indexstyles.cc
*/

html, body { height: 100%; }

.Organge {
    float: left;
    background-color: #fa7862;
    width: 100%;
    height: 80%;
}
.Grey {
    background-color: rgb(242, 242, 242);
    width: 100%;
    height: 20%;
    clear: both;
}
#UltimateGame
{
    font-size: 20px;
    font-family: "MS Sans Serif";
    color: rgb(255, 255, 255);
    line-height: 1.2;
    text-align: center;
    position: absolute;
    left: 36%;
    top: 22%;
    width: 479px;
    height: 26px;
    z-index: 3;
  }
#CloudHudlis
{
  font-size: 14px;
  font-family: "MS Sans Serif";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: 38.5%;
  top: 26%;
  width: 377px;
  height: 15px;
  z-index: 4;
 }
 #ConnectandForm
{
  font-size: 12px;
  font-family: "MS Sans Serif";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: 16%;
  top: 50%;
  width: 110px;
  height: 26px;
  z-index: 5;
}
#CreateandDevelop
{
  font-size: 12px;
  font-family: "MS Sans Serif";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: 45%;
  top: 50%;
  width: 132px;
  height: 26px;
  z-index: 9;
}
#WePublish
{
  font-size: 12px;
  font-family: "MS Sans Serif";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: 76%;
  top: 50%;
  width: 135px;
  height: 9px;
  z-index: 6;
}
#StayInformed
{
    font-size: 18px;
    font-family: "MS Sans Serif";
    color: rgb(0, 0, 0);
    line-height: 1.2;
    text-align: center;
    position: absolute;
    left: 42.83%;
    top: 80%;
    width: 197px;
    height: 128px;
    z-index: 18;
}

#mce-EMAIL
{
  font-size: 20px;
  font-family: "MS Sans Serif";
  color: rgb(153, 153, 153);
  line-height: 1.2;
  text-align: center;
  position: absolute;
  width: 80%;
  height: 100%;
}
input.button
{
    font-size: 18px;
    font-family: "MS Sans Serif";
    background-color: #fa7862;
  color: rgb(255, 255, 255);
    line-height: 1.2;
    text-align: center;
    position: absolute;
  top: -1px;
    left: 80%;
    width: 40%;
    height: 120%;
}
[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.5s 0.5s ease; 
  opacity: 0;
}
#mc_embed_signup
{
  background-color: rgb(255, 255, 255);
  position: absolute;
  left: 36%;
  top: 85%;
  width: 25%;
  height: 3.5%;
  z-index: 13;
}
#logo
{
  background-image: url("logo.png");
  position: absolute;
  left: 36.5%;
  top: 4%;
  width: 425px;
  height: 100px;
  z-index: 7;  
}
#bubble
{
  background-image: url("bubble.png");
  position: absolute;
  left: 17.57%;
  top: 37.8%;
  width: 72px;
  height: 65px;
  z-index: 8;
}
#sheet
{
  background-image: url("sheet.png");
  position: absolute;
  left: 47%;
  top: 37.8%;
  width: 56px;
  height: 72px;
  z-index: 10;
}
#controller
{
  background-image: url("controller.png");
  position: absolute;
  left: 77%;
  top: 38.55%;
  width: 92px;
  height: 59px;
  z-index: 11;
}
#About {
    font-size: 18px;
    font-style:italic;
    font-family: "MS Sans Serif";
    color: rgb(255, 255, 255);
    text-align: center;
    position: absolute;
    top: 60%;
    margin-left: 25%;
    margin-right: 25%;
}

footer {
clear: left;
width: 100%;
text-align: center;
}

footer address {
width: 100%;
clear: left;
font-size: 1.2em;
font-style: normal;
font-variant: small-caps;
background-color: rgb(242, 242, 242);
}

Answer 1

听起来您可能遇到了缓存问题。要测试一下，请访问http://cdn-images.mailchimp.com/embedcode/slim-081711.css ...如果它没有显示您期望的CSS（陈旧的旧版本），那就是您的问题。

由Mailchimp的CDN提供的css文件可能需要无效

Answer 2

固定它！所以我已经链接到标题中的mailchimp css。我实际上不得不删除链接修复问题。首先，我尝试将链接移动到我的身体，只是为了看它是否有效，但显然它没有。通常情况下，这是一个明显的错误，但只需要删除Mailchimp css的链接。谢谢你的帮助。

Answer 3

不一样的东西是不一样的：

diff -s <(curl -s http://localsite/) <(curl -s http://livesite/)

实时网站与本地网站不匹配

3 个答案: