Question

当我在Chrome上打开HTML文件时，HTML和CSS会正确显示。但是，将其上传到服务器上后，当我从URL打开网站时，显示的内容全错了。这背后的原因是什么？我将Mailchimp提供的代码用于新闻简报html，然后修改了设计。

HTML：

<!-- NEWSLETTER START-->


        <!-- Begin MailChimp Signup Form -->
        <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
        <style type="text/css">
            /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
               We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
        </style>
        <div id="mc_embed_signup">
        <form action="https://whammychat.us18.list-manage.com/subscribe/post?u=87245bd3ecc92795b3acf19b0&amp;id=5d33f134e3" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
            <div id="mc_embed_signup_scroll">
            <h2>What to Stay Updated?</h2>
            <p class="description2">We hired a team of Koalas to write our newsletters. <br> They sleep 18 hours a day so, don't worry about spam! </p>
                            <p class="description2"> We just want to inform you when Whammychat is available and any other crazy things our team is up to.</p>
        <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
        <br>

        <div class="mc-field-group">
            <label for="mce-EMAIL" id="emailadd">Email Address  <span class="asterisk">*</span>
        </label>
            <input type="email" value="" name="EMAIL" class="required email" id="personalinfo">
        </div>

        <div class="mc-field-group">
            <label for="mce-FNAME" id="firstname">First Name </label>
            <input type="text" value="" name="FNAME" class="" id="personalinfo">
        </div>

            <div id="mce-responses" class="clear">
                <div class="response" id="mce-error-response" style="display:none"></div>
                <div class="response" id="mce-success-response" style="display:none"></div>
            </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_87245bd3ecc92795b3acf19b0_5d33f134e3" tabindex="-1" value=""></div>

                <br>

                <p class="policy"><br><br>By clicking on Subscribe, you automatically agree to our newsletter policies.<p>
                <br>
                <input type="image" name="submit" class="submit" src="Subscribe%20Button.png" border="0" value="Subscribe" alt="Submit">

            </div>

        </form>
        </div>

        <!-- NEWSLETTER END-->

CSS：

/* NEWSLETTER*/
form div input {
    font-family: Helvetica;
}


label {
    display: inline-block;
    float: left;
    width: 50%;
    text-align: right;

}

#personalinfo {
    display: inline-block;
    float: left;
    width: 15vw;
    height: 2.5vw;
    margin-top: 2%;
    margin-left: 3%;
    border: solid #3fa6d2;
    border-radius: 4px;

}


@media only screen and (min-width: 700px) {

    .description2 {
        font-size: 1.8vw;
        font-family: Helvetica;
        margin-left: 10%;
        margin-right: 10%;
        line-height: 1.5;
    }

    #personalinfo {
    display: inline-block;
    float: left;
    width: 15vw;
    height: 2.5vw;
    margin-top: 2%;
    margin-left: 3%;
    border: solid #3fa6d2;
    border-radius: 4px;

 }

    #firstname {
        font-size: 1.8vw;
   }

   #emailadd {
        font-size: 1.8vw;
   }

   .indicates-required{
        font-size:1.5vw
   }

   .policy {
        font-size: 1.5vw;
        margin: 10% 10% -1% 10%;
        font-family: Helvetica;
   }



   .submit {
    width: 25%;
    margin-top: -9%;
    margin-bottom: -7%;
    }

}

@media only screen and (max-width: 700px) {

    .description2 {
        font-size: 90%;
        font-family: Helvetica;
        margin-left: 10%;
        margin-right: 10%;
        line-height: 1.5;
    }

    #personalinfo {
        display: inline-block;
        float: left;
        width: 25%;
        height: 20px;
        margin-top: 2%;
        margin-left: 3%;
        border: solid #3fa6d2;
        border-radius: 4px;

    }


   .indicates-required{
        font-size: 80%;
        margin-top: 5%;
        margin-bottom: -2%;
        font-family: Helvetica;
   }

   .policy {
        font-size: 80%;
        margin: 10% 10% -1% 10%;
   }

   .submit {
    width: 20%;
    margin-top: -9%;
    margin-bottom: -7%;

    }

}

    .mc-field-group label {
        font-size: 1.8vw;
        margin-top: 2%;
        font-family: Helvetica;
    }

/* Style the input elements and the submit button */


.submit {
    transition: 1s ease;
}

.submit:focus {
    outline:0;
}

.submit:hover{
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: 0.5s ease;

}

Answer 1

并非所有服务器都是相同的。

可能由于服务器阻止了某些图像或CSS文件而未加载它们。这通常与服务器响应发送的标头有关，浏览器通常会对此标头进行阻止。

例如，服务器可以返回此标头：

Access-Control-Allow-Origin: https://www.only-my-domain.com

这意味着从您的网站提供服务的域不允许从标头中指定的域以外的域加载javascript和css文件。

缺少字体或其他资产也可能是问题。检查浏览器的控制台和网络选项卡上的错误和警告。

Answer 2

您使用的是与方案有关的URL：link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css"

如果从文件系统中打开包含该页面的页面，则方案为file://。我猜测您的驱动器或网络位置没有"file://cdn-images.mailchimp.com/embedcode/classic-10_7.css"能够正确解析。

如果要在从文件系统浏览时解析它，请在该URL的开头添加http:或https:。

@Shahar's answer is also relevant。同样，您正在使用的某些链接也可能存在CORS问题。

与通过浏览器打开HTML文件相比，通过URL打开网站时的设计有所不同

2 个答案: