从 html 切换到 php 时消失的元素和奇怪的行为答案

【问题标题】：Disappearing elements and strange behaviour when switching from html to php从 html 切换到 php 时消失的元素和奇怪的行为
【发布时间】：2019-08-23 00:33:40
【问题描述】：

编辑！ -- 问题与浏览器缓存有关，解决方法是在 Chrome 中进行硬刷新（CTRL + F5）

当从 .html 切换到 .php 时，我的网站似乎崩溃了，并且在添加带有类的简单 div 元素和使用跨越样式或 h 标记时没有按预期运行。

基本上我正在尝试向我的页面添加 2 个简单元素。

• A heading consisting of boldened and centered text. 

• A div that will act as a vertical timeline.

一旦我使用带有自定义样式的 h1 标签和分配给类的简单 div 添加了这些元素，它就会按预期工作..

直到我在标题下添加更多文本，此时它会中断；应用于我的标题的自定义 h1 标签样式不再有效，我的时间线 div 从视图中消失！

更奇怪..当我删除文本时，问题仍然存在。即使我删除了时间线 div，问题仍然存在。

只有在我真正进入 css 并删除 .timeline 类之后，span 才真正恢复生效，这对我来说根本没有意义！

在切换到 php 之前问题不存在，所以这就是我从 html 切换到 php 代码的方式：

打开 xampp 控制面板并运行“Apache”和“MySQL”并在 Adobe Brackets 中打开我的网站项目。
将我的索引文件的文件扩展名从 .html 更改为 .php 。
将“实时预览基础 URL”更改为指向我的项目在 xampp 的 htdocs 文件夹中的目录。

此时实时预览工作正常（除了必须保存才能查看更新）

将我的标题插入到我的文档中的 h1 标签内，并将样式应用于 css 文档中的 h1 标签
创建一个带有类的 div 作为我的时间线栏

在这个阶段，如果我在文档中添加一行文本，它将中断（“这有效吗！？”）


<div class="row" style="margin-top: 46px;">

     <h1> BIOGRAPHY </h1>

     Is this working!?

     <div class="timeline"></div>


</div>

h1 {
    font-weight: 650;
    text-align: center;  
}

.timeline {
    width: 10px;
    height: 2000px;
    background: #454545;
    position: relative;
    margin: auto;
}

很抱歉，这个问题很长，我希望这是有道理的。我可能犯了一个非常愚蠢的错误，但我很难知道它是什么。

谢谢！

【问题讨论】：

这个问题几乎肯定与浏览器没有接收到的东西有关，因为服务器没有发送它们。在 Chrome 中检查您的网络控制台；一切都正确吗？具体来说，样式表、js 文件和图像可能会丢失。您可能知道，客户端并不关心服务器端渲染。它只是从某处接收数据。您的服务器端 Web 服务器错误日志也可能会有所帮助。
这对我来说更像是浏览器问题。你在使用引导程序吗？因为我注意到你的一个<div> 中有一个class="row"
@LynnCrumbling 你是对的！在查看样式表时，Chrome 实际上正在读取我的 .css 文档的旧版本，其中不包含我的 h1 样式或我的 .timeline 类（它甚至包括我之前删除的行）。我真的不确定为什么它会读取旧文件。
@TunjiOyeniran 我没有使用 Bootstrap，但我使用的是一个名为 Skeleton 的样板，它包含一个网格系统，因此属于“行”类。
@Ninoid 听起来你的缓存是问题所在。理想情况下，通过转到另一台以前从未提取过文件的 PC 进行验证，然后点击内容。如果您获得了最新版本，那么您的浏览器缓存就是罪魁祸首。如果另一台机器获取旧内容，则服务器可能确实有它正在提供的旧文件。

标签： php html css adobe-brackets

【解决方案1】：

只是一个快速更新和我找到的解决方案。我最终切换到另一台本地服务器并最终遇到了同样的问题。

所以问题实际上是浏览器缓存..

简单的解决方案是在 Chrome 上进行硬刷新(CTRL + F5)。这迫使 Chrome 从服务器读取我最新的 CSS 文件。

我希望这可以帮助遇到同样问题的人。感谢大家帮助我指出所有可能的问题。

我很高兴能够继续使用 Bracket 有用的实时预览功能！ :)

【讨论】：

哦，原来是缓存问题。嗯浏览器，他们总是帮我们太多。

【解决方案2】：

什么都没有。在我的 xampp 上复制您的代码并将其测试为 .html 和 .php 它们都有相同的结果。

这是我的代码

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
      h1 {
        font-weight: 650;
        text-align: center;
      }

      .timeline {
        width: 10px;
        height: 2000px;
        background: #454545;
        position: relative;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="row" style="margin-top: 46px;">
      <h1> BIOGRAPHY </h1>

      Is this working!?

      <div class="timeline"></div>
    </div>
  </body>
</html>

如果您仍有问题，我建议您

重新启动 Xampp 服务器
试用其他浏览器

+++好运+++

【讨论】：

感谢您花时间运行代码。正如您提到的，这似乎是我的问题，与服务器或浏览器有关。我尝试按照您的建议重新启动 xampp 服务器，这似乎没有什么不同，当我尝试将实时预览浏览器从 Chrome 更改为其他东西时，Adobe 支架的实时预览不喜欢它。我切换到 MAMP 服务器，它似乎在 Chrome 上为我工作。如果它最终再次崩溃，我肯定会尝试另一个浏览器来预览我的网站。再次感谢！