我有一个主要是 html5 和 css3 的网站，当我在 chrome 和 Internet Explorer 11.0.47 上从我的电脑本地运行它们时，页面看起来不错，但是当我把它放在 Linux 服务器上并从在我自己的电脑上，该页面在 IE 中丢失了 css，但在 chrome 中很好。
我对 html5/css3 没有太多经验。这里发生了什么？我尝试用谷歌搜索它，但没有看到任何在线帮助。
网页是start of web site .如您所见，在 IE 中，Map Home 未显示为左侧导航中的按钮，并且导航丢失了它的棕色背景。它还丢失了标题背景。如果您查看 chrome 中的链接，就会发现这些链接。
有什么想法吗？当 IE 从 Linux 而不是 chrome 中提取媒体文件夹时，使用媒体文件夹会不会存在方向性问题？
**添加: 我在服务器日志上看到了这个，但是当我列出服务器上的位置时，该文件存在于那里。引用globe文件的css文件(catvStyles.css)与index.html在同一个目录，media目录在index.html的目录下。
File does not exist: /opt/apps/html/catv/media/globe_transp_gradation.png), url(.., referer: http://ltrkarkvm391.mgmt.windstream.net/catv/index.html
** 这看起来类似于 other web page如果您无法访问链接。问题是我的 Linux 托管站点没有在左侧显示棕色导航，没有显示金属标题地球仪和风车图片，也没有在按钮中显示 map 主页(它是没有按钮的链接)，并且它没有在右侧显示图片(现在在正文中)。
这是 index.html 页面:
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="FunStuff/catvStyles.css">
<title>CATV Monitoring</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Wi">
<meta name="keywords" content="catv, cmts, snmp, modem, dhcp, rf, status, map">
<meta name="author" content="Wi, Michele, Adam">
<style type="text/css">
</style>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header role="banner" class="bgFun">
<h1>Wi</h1>
<h2 id="headerH2Pos">CATV Monitoring System</h2>
</header>
<div id="page">
<nav role="navigation" id="navBakImg">
<ul>
<li><a href="FunStuff/ClusterMap.html">Map Home</a></li> <!--MapHome.html-->
</ul>
</nav>
<main role="main" id="middle">
<h2>Purpose</h2>
<p>To provide CATV Monitoring to our internal customers</p>
</p>
<h2>Mapping </h2>
<p>Click the "Map Home" link on the left to see how the network is doing </p>
<img class="imgFix" src="media/WIN_Vert_Green_Logo.png" height:"18" width:"15" alt="Logo" title="Wi" >
</p>
</main>
<aside role="complementary">
<img class="imgFix" src="media/WIN_Vert_Green_Logo.png" height:"18" width:"15" alt="Logo" title="Wi" >
<h2>How To Start</h2>
<p>See directions</p>
</aside>
</div> <!-- end of flex container -->
<footer role="contentinfo">
<a href="https://www.linkedin.com/in/michele" target="_blank"><img class="tree" src="media/Tree_Branches_And_Roots_clip_art_small.png" height="50" width="50" alt="Tree" title="Created by Michele " ></a>
<br>Copyright © 2017
<script>
document.write('Last Modified: ' + document.lastModified);
</script>
<br>
</footer>
</div>
</body>
</html>
这是 css catvStyles.css:
body {font-family: Verdana, Arial, sans-serif;
background-color: #330000;
background-image: url(../media/green.gif);
}
#middle{}
header, h1, wrapper { margin-top: 0; }
#wrapper { background-color: #F4E8BC;
/*background-color: #00ffff;*/
width: 90%;
margin: auto;
color: #003300;/*color: #330000;*/
}
h1, h2 { color: #003300; }
header {
background-repeat: no-repeat;
background-color:transparent;
}
.bgFun{background-image: url(../media/globe_transp_gradation.png),
url(../media/windmill_transp_gradation.png),url(../media/MetalGalvanized0014_M.jpg);
background-position: left, right;
/*width: 80%;
height:80%;*/
background-size:45%,30%,cover;
background-repeat:no-repeat;
background-color:transparent;}
h1 { text-align: center;
font-size: 300%;
padding: 5% 0;
text-shadow: 3px 3px 3px #F4E8BC;
}
nav, main, aside { padding: 0 1em;
}
.imgFix { width: 25%;
height: auto;
}
nav ul { list-style-type: none;
font-size: 1.2em;
padding-left: 0;
}
/*nav a { text-decoration: none;}*/
nav a {
text-decoration: none;
background-color: #666666;
display:block;
text-align:center;
width:100%;
margin:1em auto;
border:solid .08em #339900
}
nav a:link { color: #330000; }
nav a:visited { color: #003300; }
nav a:hover { color: #996600;
background-color:#000000;}
footer { text-align: center;
font-size: 80%;
font-style: italic;
color: #003300;
padding: 2.5%;
}
#page{display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#navBakImg{border: .1em solid #000000;
padding-right:1em;
background-image: url(../media/CardboardPlain0016_2_M.jpg);
font-size:90%;}
nav{-webkit-flex: 1;
flex: 1;
}
main{-webkit-flex: 7;
flex:7;
}
aside{-webkit-flex: 2;
flex: 2;
}
.tree { width:3em;
height: auto;
float:right;}
@media only screen and (max-width: 1024px) {
body { margin: 0; padding: 0; }
#wrapper { width: auto; margin: 0; }
h1 { font-size: 200%; }
nav li { padding: 0 0.5em;
font-size: 1.2em;
}
#page{-webkit-flex-direction: column;
flex-direction: column;
}
nav ul{display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
webkit-justify-content: center;
justify-content: center;
}
.imgFix { width: 30%;
height: auto;}
}
@media only screen and (max-width: 768px) {
nav{-webkit-order: 1;
order: 1;
}
nav ul{-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
section{display:none;}
.imgFix { width: 35%;
height: auto;}
}
header, main, nav, footer, figure, figcaption { display: block; }
#headerH2Pos{position:relative;
left:26%;
}
最佳答案
编辑: 看起来像是其他东西，正如 Michele 所说，它在 Chrome 中工作，但在从 Linux 提供服务时在 IE 中工作。
根据您的文件名判断，您可能刚刚遇到了 Windows => Linux 陷阱:
Linux 文件系统区分大小写，Windows 不区分大小写。
您需要仔细检查您在 URL 中使用的大小写是否正确，否则当 Linux 查找文件时将找不到该文件。
关于linux - 网站在 linux 服务器上托管时丢失 css 内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47202804/