Question

我有一个主要是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位于同一目录中，媒体目录位于index.html的目录中。

文件不存在： /opt/apps/html/catv/media/globe_transp_gradation.png），网址（..， referer：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 &copy; 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%;
             }

Answer 1

编辑：看起来像是其他东西，因为Michele说它可以在Chrome中运行，但在Linux上运行时不适用于IE。

根据您的文件名判断，您可能刚刚遇到了Windows =＆gt; Linux问题：

Linux文件系统区分大小写，Windows不区分大小写。

您需要仔细检查您是否在网址中使用了正确的大小写，否则当Linux去寻找时，将无法找到该文件。

Answer 2

我必须添加此行并修复：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

在Linux服务器

2 个答案: