个人中心
gpt4 book ai didi

linux - 网站在 linux 服务器上托管时丢失 css 内容

转载 作者：塔克拉玛干 更新时间：2023-11-02 23:45:29 24 4
gpt4 key购买 nike

我有一个主要是 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 &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%;
             }

最佳答案

编辑: 看起来像是其他东西，正如 Michele 所说，它在 Chrome 中工作，但在从 Linux 提供服务时在 IE 中工作。

根据您的文件名判断，您可能刚刚遇到了 Windows => Linux 陷阱:

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

您需要仔细检查您在 URL 中使用的大小写是否正确，否则当 Linux 查找文件时将找不到该文件。

关于linux - 网站在 linux 服务器上托管时丢失 css 内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47202804/

24 4 0
文章推荐： Android、Facebook 登录按钮导致崩溃 (SDK 4.0.0)
文章推荐： c++ - 如何将专用字符串映射到指定的整数
文章推荐： android - Android 5.0如何使用adb命令获取MEID和IMEI信息？
文章推荐： c++ - 用于计算乘数和除数值的优化算法
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com