Question

我有这个site，我的css和javascript链接正在运行，但问题是css没有在网站上应用。当我访问我的CSS的链接时，浏览器下载css和javascript文件。我试过Googles PageSpeed Insights，它说

消除外部渲染阻止Javascript和CSS 首要内容

由于这个原因，我的样式表无效。

Resource interpreted as Stylesheet but transferred with MIME type application/x-httpd-php

这是我网站的文件结构。我在我的网站上使用Smarty Templating和Bootstrap。

enter image description here

我的模板位于视图文件夹

中

enter image description here

示例代码

的index.php

<?php
require_once('includes/initialize.php');
$smarty = new Smarty_skyerp();
//$smarty->testInstall();

$smarty->assign('title','Skyerp | Home'); 
$smarty->assign('year',date("Y", time()));

$smarty->display('index.tpl.html');


?>

index.tpl.html

{extends file='layout.tpl.html'}

{block name='nav'}
    <ul class="nav">
        <li class="active"><a href="index.php">Home</a></li>
        <li><a href="skyerp.php">SkyERP</a></li>
        <li><a href="payroll.php">SkyPayroll</a></li>
        <li><a href="manual.php">Manuals</a></li>
        <li><a href="support.php">Support</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="contact.php">Contact Us</a></li>       
    </ul>
{/block}

{block name='content'}
    <div class="row-fluid"></div>
{/block}

layout.tpl.html

  <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{$title}</title>

    <link href="assets/css/bootstrap.css" type="text/css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.min.css" type="text/css" rel="stylesheet">
    <link href="assets/css/docs.css" type="text/css" rel="stylesheet">
    <style type="text/css">
      body {
        <!--background-image: url('assets/img/skyerp_blue.jpg');-->
        background-size: 80%;
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:bottom;

      }
    </style>
    <link href="assets/css/stickyfooter.css" rel="stylesheet">
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    {block name="head"}{/block}

</head>
<body data-spy="scroll" data-target=".module-sidebar">
    <div id="wrap" style="height: 100%;">
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="brand" href="index.php" style="padding: 6px 10px 1px 0;"><img src="assets/img/headerfull.png"/></a>
                    <div class="nav-collapse collapse" style="margin-top: 14px;">
                        {block name='nav'}{/block}
                        <!--<form class="navbar-form pull-right">
                            <input class="span2" type="text" placeholder="Email">
                            <input class="span2" type="password" placeholder="Password">
                            <button type="submit" class="btn btn-primary">Sign in</button>
                        </form>-->
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            {block name='banner'}{/block}
            {block name='content'}{/block}
        </div>
        <div id="push"></div>
    </div>

        <footer id="footer" class="footer">
          <div class="container">
            <p>SkyErp © {$year}. All Rights Reserved.</p>
            <p></p>
            <p></p>
            <ul class="footer-links">
              <li><a href="http://blog.getbootstrap.com">Blog</a></li>
              <li class="muted">&middot;</li>
              <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
              <li class="muted">&middot;</li>
              <li><a href="https://github.com/twitter/bootstrap/blob/master/CHANGELOG.md">Changelog</a></li>
            </ul>
          </div>
        </footer>

    <script src="assets/js/bootstrap.min.js"></script>
    {block name='script'}{/block}

</body>

`

问题的原因是什么？是服务器端的问题还是我如何处理我的文件？我该怎么做才能解决这个问题？

Answer 1

我找到了解决方法。我认为问题出在服务器端。。我的网站在Windows Server上运行。在自定义MIME类型的IIS设置下，我将.css设置mime类型添加到text/css，.js将mime类型设置为text/javascript。没有尝试过Apache。

在首屏内容中消除外部渲染阻止Javascript和CSS

1 个答案: