从 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 代码的方式:
打开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;
}
很抱歉这个问题很长,我希望它是有道理的。我可能犯了一个非常愚蠢的错误,但我正在努力了解它是什么。
谢谢!
没有任何问题。
在我的 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 服务器
- 试用其他浏览器
+++ 祝你好运 +++
只是一个快速更新和我找到的解决方案。我最终切换到另一台本地服务器,最终 运行 遇到了同样的问题。
所以问题实际上归结为浏览器缓存..
简单的解决方案是在 Chrome (CTRL + F5) 上进行硬刷新。这迫使 Chrome 从服务器读取我最新的 CSS 文件。
我希望这对遇到同样问题的人有所帮助。感谢大家帮助我指出所有可能的问题。
很高兴我可以继续使用 Bracket 的实时预览功能! :)
编辑! -- 问题与浏览器缓存有关,解决方案是在 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;
}
很抱歉这个问题很长,我希望它是有道理的。我可能犯了一个非常愚蠢的错误,但我正在努力了解它是什么。
谢谢!
没有任何问题。
在我的 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 服务器
- 试用其他浏览器
+++ 祝你好运 +++
只是一个快速更新和我找到的解决方案。我最终切换到另一台本地服务器,最终 运行 遇到了同样的问题。
所以问题实际上归结为浏览器缓存..
简单的解决方案是在 Chrome (CTRL + F5) 上进行硬刷新。这迫使 Chrome 从服务器读取我最新的 CSS 文件。
我希望这对遇到同样问题的人有所帮助。感谢大家帮助我指出所有可能的问题。
很高兴我可以继续使用 Bracket 的实时预览功能! :)