You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

本地正常但他人电脑中CSS被识别为纯文本的问题求助

avatar
DevOps 小满
2026-8-20
问题：本地正常的HTML页面发送给他人后CSS失效，被当作纯文本显示

本地使用Firefox打开保存的.html文件时样式正常，但发送给他人后CSS无法生效，他人电脑上查看代码时，CSS被当作纯文本处理而非代码。附上完整代码请求排查：

<!DOCTYPE html>
<html>

<head>
  <title>Home</title>

  <style type="text/css">
    a:link {
      color: black;
    }
    
    a:visited {
      color: black;
    }
    
    a:hover {
      color: #327da8;
    }
    
    .name {
      font-size: 20px;
      font-color: black;
      font-family: montserrat;
      text-decoration: none;
      position: absolute;
      margin-top: 360px;
      text-align: left;
      border-width: 1px;
      border-style: solid;
      border-color: lightgray;
      padding: 27.5px;
      border-radius: 0px 0px 15px 15px;
    }
    
    a img {
      border-radius: 50%;
      display: block;
      border: none;
    }
    
    .navbar {
      text-decoration: none;
      padding-left: 30px;
      padding-right: 30px;
      font-family: montserrat;
      font-weight: 150;
    }
    
    body {
      background-image: url("file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/The%20Lost%20Dogs%20Home.png");
      background-repeat: no-repeat;
      background-position: left top;
      background-attachment: fixed;
      background-size: 200px, 600px;
    }
    
    a:hover~.name {
      color: #327da8;
      border-color: #327da8;
    }
    
    img {
      border: 10px solid black;
    }
  </style>
</head>

<body>

  <nav>
    <table style="margin-left:190px;margin-right:auto; margin-top:45px; font-size:20px;">
      <tr>
        <th><a class="navbar" href="PupLove.html">Home</a></th>
        <th><a class="navbar" href="PupLoveDonate.html">Donate</a></th>
        <th><a class="navbar" href="PupLoveCare.html">How to take care of a dog</a></th>
        <th><a class="navbar" href="PupLoveContacts&amp;FAQ's.html">Contacts and FAQ's</a></th>
        <th><a class="navbar" href="PupLoveBlog.html">Blog</a></th>
  </nav>
  </tr>
  </table>

  <div>
    <a href="PupLoveNala.html"><img style="position:absolute; margin-top:60px; margin-left:50px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-EFGH/goldenretrieversf1.jpg" height="300" width="200"></a>
    <a class="name" style="margin-left:50px;" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveNala.html">Nala <br><br> Breed: Golden <br> Retriever <br><br> Sex: Female</a></div>

  <div>
    <a href="PupLoveBillie.html"><img style="position:absolute; margin-top:60px; margin-left:350px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-EFGH/greatdanesf5.jpg" height="300" width="200"></a>
    <a class="name" style="margin-left:350px; padding:36.5px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveBillie.html">Billie <br><br> Breed: Great <br> Dane <br><br> Sex: Male</a></div>

  <div>
    <a href="PupLoveBendi.html"><img style="position:absolute; margin-top:60px; margin-left:650px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-AB/australiancattledogsf1.jpg" height="300" width="200"></a>
    <a class="name" style="margin-left:650px; padding:41px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveBendi.html">Bendi <br><br> Breed: Blue <br> Heeler <br><br> Sex: Male</a></div>

  <div>
    <a href="PupLoveRufus.html"><img style="position:absolute; margin-top:60px; margin-left:950px; border-radius:15px 15px 0px 0px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Bearded_collie_and_a_rope.jpg/640px-Bearded_collie_and_a_rope.jpg" height="300" width="200"></a>
    <a class="name" style="margin-left:950px; padding:21px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveRufus.html"><br>Rufus <br><br> Breed: Bearded <br> Collie <br><br> Sex: Male<br>ㅤ</a>
  </div>

</body>

</html>

解决方法

  • 修复HTML标签闭合顺序：代码里<nav>标签在<tr>之前就闭合了，导致HTML结构错乱，浏览器无法正确解析样式区域。正确的顺序应该是先闭合<tr>、<table>，再闭合<nav>。
  • 替换本地绝对路径为相对路径：所有file:///C:/Users/...这类本地路径，他人电脑上不存在对应文件，会导致背景图加载失败、跳转失效。把所有关联文件（其他HTML页面、图片）和主页面放在同一文件夹下，用./文件名格式引用，比如href="./PupLoveNala.html"，背景图改为url("./The Lost Dogs Home.png")。
  • 修正无效CSS属性：.name类里的font-color是错误属性，改成color: black;，否则文字颜色不会生效。

修改后的完整代码示例 

<!DOCTYPE html>
<html>

<head>
  <title>Home</title>

  <style type="text/css">
    a:link {
      color: black;
    }
    
    a:visited {
      color: black;
    }
    
    a:hover {
      color: #327da8;
    }
    
    .name {
      font-size: 20px;
      color: black;
      font-family: montserrat;
      text-decoration: none;
      position: absolute;
      margin-top: 360px;
      text-align: left;
      border-width: 1px;
      border-style: solid;
      border-color: lightgray;
      padding: 27.5px;
      border-radius: 0px 0px 15px 15px;
    }
    
    a img {
      border-radius: 50%;
      display: block;
      border: none;
    }
    
    .navbar {
      text-decoration: none;
      padding-left: 30px;
      padding-right: 30px;
      font-family: montserrat;
      font-weight: 150;
    }
    
    body {
      background-image: url("./The Lost Dogs Home.png");
      background-repeat: no-repeat;
      background-position: left top;
      background-attachment: fixed;
      background-size: 200px, 600px;
    }
    
    a:hover~.name {
      color: #327da8;
      border-color: #327da8;
    }
    
    img {
      border: 10px solid black;
    }
  </style>
</head>

<body>

  <nav>
    <table style="margin-left:190px;margin-right:auto; margin-top:45px; font-size:20px;">
      <tr>
        <th><a class="navbar" href="./PupLove.html">Home</a></th>
        <th><a class="navbar" href="./PupLoveDonate.html">Donate</a></th>
        <th><a class="navbar" href="./PupLoveCare.html">How to take care of a dog</a></th>
        <th><a class="navbar" href="./PupLoveContacts&amp;FAQ's.html">Contacts and FAQ's</a></th>
        <th><a class="navbar" href="./PupLoveBlog.html">Blog</a></th>
      </tr>
    </table>
  </nav>

  <div>
    <a href="./PupLoveNala.html"><img style="position:absolute; margin-top:60px; margin-left:50px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-EFGH/goldenretrieversf1.jpg" height="300" width="200"></a>
    <a class="name" style="margin-left:50px;" href="./PupLoveNala.html">Nala <br><br> Breed: Golden <br> Retriever <br><br> Sex: Female</a></div>

  <div>
    <a href="./PupLoveBillie.html"><img style="position:absolute; margin-top:60px; margin-left:350px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-EFGH/greatdanesf5.jpg" height="300" width="200"></a>
    <a class="name" style="margin-left:350px; padding:36.5px" href="./PupLoveBillie.html">Billie <br><br> Breed: Great <br> Dane <br><br> Sex: Male</a></div>

  <div>
    <a href="./PupLoveBendi.html"><img style="position:absolute; margin-top:60px; margin-left:650px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-AB/australiancattledogsf1.jpg" height="300" width="200"></a>
    <a class="name" style="margin-left:650px; padding:41px" href="./PupLoveBendi.html">Bendi <br><br> Breed: Blue <br> Heeler <br><br> Sex: Male</a></div>

  <div>
    <a href="./PupLoveRufus.html"><img style="position:absolute; margin-top:60px; margin-left:950px; border-radius:15px 15px 0px 0px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Bearded_collie_and_a_rope.jpg/640px-Bearded_collie_and_a_rope.jpg" height="300" width="200"></a>
    <a class="name" style="margin-left:950px; padding:21px" href="./PupLoveRufus.html"><br>Rufus <br><br> Breed: Bearded <br> Collie <br><br> Sex: Male<br>ㅤ</a>
  </div>

</body>

</html>

内容的提问来源于stack exchange，提问作者ApexChikin

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.08.20 12:36:23