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

Disappearing elements and strange behaviour when switching from html to php

编辑! -- 问题与浏览器缓存有关,解决方案是在 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 代码的方式:

  1. 打开xampp控制面板和运行'Apache'和'MySQL'并在Adobe Brackets中打开我的网站项目。

  2. 将我的索引文件的文件扩展名从 .html 更改为 .php 。

  3. 更改“Live Preview Base URL 以指向我在 xampp 的 htdocs 文件夹中的项目目录。

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

  1. 将我的标题插入 h1 标签内的文档,并将样式应用于 css 文档中的 h1 标签

  2. 创建一个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;
}

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

谢谢!

没有任何问题。 在我的 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>

如果你还有问题,我建议你

  1. 重新启动您的 Xampp 服务器
  2. 试用其他浏览器

+++ 祝你好运 +++

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

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

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

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

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