【发布时间】：2018-04-22 12:05:08
【问题描述】：
我有一个主要是 html5 和 css3 的网站，当我在 chrome 和 internet explorer 11.0.47 上从我的电脑本地运行它们时，页面看起来不错，但是当我把它放在 Linux 服务器上并运行页面时在我自己的电脑上，页面在 IE 中丢失了 css，但在 chrome 中很好。
我对 html5/css3 没有太多经验。这里发生了什么？我尝试用谷歌搜索它，但没有看到任何在线帮助。
网页是start of web site。如您所见，在 IE 中，地图主页没有显示为左侧导航中的按钮，并且导航失去了棕色背景。它也失去了标题背景。如果您查看 chrome 中的链接，就会发现这些链接。
有什么想法吗？当 IE 从 Linux 而非 chrome 中拉取媒体文件夹时，使用媒体文件夹是否存在方向性问题？
**添加： 我在服务器日志上看到了这一点，但是当我列出服务器上的位置时，文件就在那里。引用globe文件的css文件（catvStyles.css）与index.html在同一个目录下，媒体目录在index.html的目录下。
文件不存在： /opt/apps/html/catv/media/globe_transp_gradation.png), url(.., 推荐人：http://ltrkarkvm391.mgmt.windstream.net/catv/index.html
** 如果您无法访问链接，这看起来类似于other web page。问题是我的 linux 托管站点没有显示左侧的棕色导航，没有显示金属标题球和风车图片，也没有在按钮中显示 Map Home（它是没有按钮的链接），并且它没有在右侧显示图片（现在在正文中）。
这是 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%;
}
【问题讨论】：
-
链接已损坏。
-
我可以访问链接。也许它只是对我开放，因为我在那里工作。我不能给你打开它。
-
如果我们无法复制问题，就很难提供帮助
-
您能否在不使用相对路径的情况下进行测试 (
url(../media/globe_transp_gradation.png)=>url(/media/globe_transp_gradation.png))。我知道相对路径可以让您直接从开发机器的硬盘中查看文件，但这可以防止您遇到使用实际服务器时可能出现的问题。 -
我尝试将 index.html 的 css 文件移动到同一个目录，然后不需要 .. 用于该页面，它仍然没有找到地球文件。另外，我当然将路径更改为 css 文件，使其位于同一目录中。我现在应该发布该代码吗？如果有人在看上面的代码，我不想拿走它。该路径将是 media/globe_transp_gradation.png 然后前面没有 /。
标签： linux html css google-chrome internet-explorer-11