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

Question

编辑！ -- 问题与浏览器缓存有关，解决方案是在 Chrome (CTRL + F5)

中进行硬刷新

我的网站似乎在从 .html 切换到 .php 时出现故障，并且在添加带有 classes 的简单 div 元素时没有按预期运行并使用跨越样式或 h 标签。

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

• A heading consisting of boldened and centered text. 

• A div that will act as a vertical timeline.

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

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

甚至 st运行ger.. 当我删除文本时问题仍然存在。即使我删除了时间线div，问题仍然存在。

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

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

打开xampp控制面板和运行'Apache'和'MySQL'并在Adobe Brackets中打开我的网站项目。
将我的索引文件的文件扩展名从 .html 更改为 .php 。
更改“Live Preview Base URL 以指向我在 xampp 的 htdocs 文件夹中的项目目录。

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

将我的标题插入 h1 标签内的文档，并将样式应用于 css 文档中的 h1 标签
创建一个div和一个class作为我的时间轴栏

在这个阶段，如果我在文档中添加一行文本，它就会崩溃 ("is this working!?")


<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;
}

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

谢谢！

Answer 1

没有任何问题。在我的 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 服务器
试用其他浏览器

+++ 祝你好运 +++

Answer 2

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

所以问题实际上归结为浏览器缓存..

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

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

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

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

Disappearing elements and strange behaviour when switching from html to php

php

html

css

adobe-brackets