【问题标题】:Cant link stylesheet无法链接样式表
【发布时间】:2015-02-22 21:58:58
【问题描述】:

我在这里感觉有点愚蠢,但我已经被一个看似超级简单的问题困了几个小时,而且似乎也无法在网上找到任何好的答案......

我正在建立一个新网站。我使用 Bitnami 启动了一个带有 LAMP 的 Amazon EC2 实例,现在我开始构建站点,但是当我尝试使用标签将我的索引文件(或任何其他文件)链接到我的 CSS 文件时,我的所有 CSS 都被“导入”到PHP 文件而不是创建链接。 我的源代码中还有一些我没有放在那里的标签。知道这些是从哪里来的吗?

这是我目前的代码:

<html>

<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

<div id="page-wrap" class="home-page">

    <form id="compare" name="compare" method="get" action="compare.php">
        <input type="text" id="stocks" name="stocks" placeholder="Input Stocks Symbols to Compare">
    </form>

</div>

</body>

</html>

这是浏览器输出的源代码:

<html> 

<head> 

<style>#page-wrap{width:960px;margin:0 auto}.home-page #compare{text-align:center;margin-top:200px}.home-page #compare #stocks{width:750px;height:55px;border:1px solid #ddd;border-bottom:2px solid #ccc;font-family:'Open Sans',sans-serif;color:#aaa;font-size:18px;text-transform:uppercase;text-align:center}.column{float:left;width:300px}</style> 

</head> 

<body><noscript><meta HTTP-EQUIV="refresh" content="0;url='http://wellmadestocks.com/?ModPagespeed=noscript'" /><style><!--table,div,span,font,p{display:none} --></style><div style="display:block">Please click <a href="http://wellmadestocks.com/?ModPagespeed=noscript">here</a> if you are not redirected within a few seconds.</div></noscript> 

<div id="page-wrap" class="home-page"> 

<form id="compare" name="compare" method="get" action="compare.php"> 
<input type="text" id="stocks" name="stocks" placeholder="Input Stocks Symbols to Compare"> 
</form> 

</div> 

<script pagespeed_no_defer="" type="text/javascript">//<![CDATA[
(function(){var e=encodeURIComponent,f=window,h=document,m="width",n="documentElement",p="height",q="length",r="prototype",s="body",t="&",u="&ci=",w="&n=",x="&rd=",y=",",z="?",A="Content-Type",B="Microsoft.XMLHTTP",C="Msxml2.XMLHTTP",D="POST",E="application/x-www-form-urlencoded",F="img",G="input",H="load",I="oh=",J="on",K="pagespeed_url_hash",L="url=",M=function(a,c,d){if(a.addEventListener)a.addEventListener(c,d,!1);else if(a.attachEvent)a.attachEvent(J+c,d);else{var b=a[J+c];a[J+c]=function(){d.call(this);b&&b.call(this)}}};f.pagespeed=f.pagespeed||{};var N=f.pagespeed,O=function(a,c,d,b,g){this.d=a;this.f=c;this.g=d;this.a=g;this.c={height:f.innerHeight||h[n].clientHeight||h[s].clientHeight,width:f.innerWidth||h[n].clientWidth||h[s].clientWidth};this.e=b;this.b={}};O[r].j=function(a){a=a.getBoundingClientRect();return{top:a.top+(void 0!==f.pageYOffset?f.pageYOffset:(h[n]||h[s].parentNode||h[s]).scrollTop),left:a.left+(void 0!==f.pageXOffset?f.pageXOffset:(h[n]||h[s].parentNode||h[s]).scrollLeft)}};O[r].i=function(a){if(0>=a.offsetWidth&&0>=a.offsetHeight)return!1;a=this.j(a);var c=a.top.toString()+y+a.left.toString();if(this.b.hasOwnProperty(c))return!1;this.b[c]=!0;return a.top<=this.c[p]&&a.left<=this.c[m]};O[r].l=function(){for(var a=[F,G],c=[],d={},b=0;b<a[q];++b)for(var g=h.getElementsByTagName(a[b]),k=0;k<g[q];++k){var v=g[k].getAttribute(K);v&&g[k].getBoundingClientRect&&this.i(g[k])&&!(v in d)&&(c.push(v),d[v]=!0)}b=!1;a=I+this.g;this.a&&(a+=w+this.a);if(0!=c[q]){a+=u+e(c[0]);for(b=1;b<c[q];++b){d=y+e(c[b]);if(131072<a[q]+d[q])break;a+=d}b=!0}this.e&&(d=x+e(JSON.stringify(this.h())),131072>=a[q]+d[q]&&(a+=d),b=!0);N.criticalImagesBeaconData=a;if(b){var c=this.d,b=this.f,l;if(f.XMLHttpRequest)l=new XMLHttpRequest;else if(f.ActiveXObject)try{l=new ActiveXObject(C)}catch(P){try{l=new ActiveXObject(B)}catch(Q){}}l&&(l.open(D,c+(-1==c.indexOf(z)?z:t)+L+e(b)),l.setRequestHeader(A,E),l.send(a))}};O[r].h=function(){for(var a={},c=h.getElementsByTagName(F),d=0;d<c[q];++d){var b=c[d],g=b.getAttribute(K);if("undefined"==typeof b.naturalWidth||"undefined"==typeof b.naturalHeight||"undefined"==typeof g)break;if("undefined"==typeof a[b.src]&&0<b[m]&&0<b[p]&&0<b.naturalWidth&&0<b.naturalHeight||"undefined"!=typeof a[b.src]&&b[m]>=a[b.src].n&&b[p]>=a[b.src].m)a[g]={renderedWidth:b[m],renderedHeight:b[p],originalWidth:b.naturalWidth,originalHeight:b.naturalHeight}}return a};N.k=function(a,c,d,b,g){var k=new O(a,c,d,b,g);M(f,H,function(){f.setTimeout(function(){k.l()},0)})};N.criticalImagesBeaconInit=N.k;})();pagespeed.criticalImagesBeaconInit('/mod_pagespeed_beacon','http://wellmadestocks.com/','O-_tWHm2s1',false,'BwP-b7zi7Po');
//]]></script></body> 

</html>

你知道这一切可能是从哪里来的吗?任何帮助将不胜感激。

提前致谢!

【问题讨论】:

    标签: html css amazon-ec2 noscript stylesheet-link-tag


    【解决方案1】:

    最可能的原因是亚马逊正在读取具有错误 MIME 类型的 CSS 文件,并且文件的 Content-Type 属性设置不正确,因此它们被作为另一种文件类型读取,可能很简单 @ 987654324@ 文件,由 PHP 脚本导入,而不是在页面中显示为 &lt;link&gt; 标记。要解决此问题,您需要在文件上 set a custom header/metadata 指定正确的 MIME 类型。

    【讨论】:

    • 感谢您的提示!您可能是对的,但是我一直在调查,我不确定您提供的链接是否适合我。我是 AWS 新手,但我不认为我使用的是 S3,只是一个 EC2 实例。当我访问我的 AWS 控制台并导航到 S3 时,我看到没有创建任何存储桶,因此没有什么可以为那里设置自定义标头......:S
    • 不知道this 是否有帮助,但它似乎是我能找到的最相关的 S3 文档。 EC2 上还没有任何内容。会及时通知您!
    • 仍然没有在 EC2 上找到任何东西。有没有可能是您意外使用.cs 扩展名命名了您的文件,EC2 默认将其处理为“文本”?
    • 我只是仔细检查了一下,文件扩展名是正确的:S
    • 好吧,我并没有真正找到解决方案,但我确实解决了问题......我刚刚启动了一个新的 EC2 实例,这次使用的是 LEMP 而不是 LAMP。在这个新实例上,一切似乎都运行良好。无论如何,非常感谢您的帮助! :)
    猜你喜欢
    • 1970-01-01
    • 2017-12-05
    • 1970-01-01
    • 2021-10-22
    • 1970-01-01
    • 2021-02-20
    • 2020-01-13
    • 2018-02-08
    • 2012-09-15
    相关资源
    最近更新 更多