页面顶部的奇怪空白 – HTML、CSS 和 PHP

2024-02-28

好吧,这是我遇到的一个奇怪的问题。我有两个页面,略有不同,但共享几个相同的元素(基本上是两个图像)。

这些图像都由相同的 CSS 样式表控制,但是,它们在第二页上似乎都低了约 20-30 像素。

第二个页面的不同之处在于它使用 PHPbefore文档类型声明。不过,正如后面所说,我认为这不是问题所在。

要查看此效果,请连续查看这两个页面:http://www.codecreek.biz/login http://www.codecreek.biz/login and http://www.codecreek.biz/registration/register http://www.codecreek.biz/registration/register.

需要明确的是,我已经查看了许多可能的答案。This https://stackoverflow.com/questions/9630240/mysterious-white-space-at-top-of-page似乎不是我的情况,因为我没有在这些页面上使用表格。

这是我尝试过的:

  • 检查代码中的空格。但是,如果您查看这两个页面的源代码,您实际上会注意到第二个有问题的页面有一个less顶部的一行空白,位于其 Doctype 声明之前。
  • 从第二页删除 PHP 代码。这也没有任何效果。
  • 减少 PHP 结束标签之间的明显空间?><!DOCTYPE HTML>什么也没有。这又没有任何效果。
  • 检查是否有BOM http://en.wikipedia.org/wiki/Byte_order_mark。我用vim做了这个,结果证实没有使用BOM。
  • 检查我的 CSS。我没有发现任何奇怪的地方,但我在 CSS 方面是个新手,所以,由于这可能是问题所在,这里是我的样式表的链接:http://www.codecreek.biz/resources/main.css http://www.codecreek.biz/resources/main.css。 (免责声明:我正在重写该页面,所以如果它看起来很奇怪,那就这样吧!)。

此外,Safari 的开发者检查工具清楚地表明<body>我的第二页上的标签仅从向下 20 像素左右开始。

老实说我很失落。我希望有一个简单的解决方案,但我已经为此工作了几个小时,但无济于事。

编辑:这是“标题”图像和“波浪线”图像的 CSS。

#login_title { position:absolute; width:1000px; top:100px; }
#login_line { position:absolute; width:500px; top:330px; left:250px; }

注册页面上的H1有一个默认的Margin。有时,我不知道为什么,如果你给第一个元素留出边距,它会将其应用于父元素。

通过将 H1 #register_title 的上边距设置为 0,您应该可以解决您的问题。

#register_title { margin-top: 0; }

永远记住使用reset.css实现或者记住元素的样式是默认的。

编辑: 我想指出这是一个问题,因为您之前的所有元素都是绝对定位的。您确实不应该像现在这样使用绝对定位。您应该使用 margin-top、padding-top 将元素在页面中向下移动。仅当没有其他可用的定位元素的途径时才应使用绝对定位。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

页面顶部的奇怪空白 – HTML、CSS 和 PHP 的相关文章

  • 改进将字符串转换为可读的 url

    以下函数重写包含各种字符的新闻和产品标题的 url 我希望创建的字符串仅包含字母数字值和 但没有结尾 或空格 也没有重复的 下面的函数工作正常 但我想知道是否有任何方法可以将其编写得更简单或更有效 function urlName stri
  • 正确显示mySQL一对多查询结果

    我有两张桌子 TRIPS tripID clientID and LEGS legID depart arrive tripID TRIPS 与 LEGS 具有一对多关系 因为有多个legID s per tripID 我需要以以下格式显示
  • 通过 Javascript 更改 Webkit 属性?

    请帮助我 可能是因为我对 CSS 动画和 Javascript 相当陌生 但我使用的代码应该更改它的属性 当我运行代码时 它会执行代码中的所有其他操作 除了更改所需 div 的 CSS 属性 我已经尝试了所有这四种方法 但似乎都不起作用 它
  • 使用Java获取CSS文件中图像的URL?

    我正在尝试使用 Java 获取远程 CSS 文件中图像 所有 MIME 类型 的 URL 我正在使用 jsoup 来获取 css 的 URL 经过无数个小时的观看CSS解析器 http cssparser sourceforge net 由
  • 如何从数据库生成 Doctrine 实体并使用 PSR-4 自动加载?

    使用教义2 5使用 PSR 4 自动加载并将已设计的数据库模式转换为实体类 注释 问题是将导出的文件放入正确的目录结构中 作曲家 json autoload psr 4 Application src require doctrine or
  • 正则表达式从 img 标签获取 src 值

    我正在使用以下正则表达式来获取src第一个的值imgHTML 文档中的标签 string match src
  • 如何显示/隐藏jsf组件

    在我的一个 JSF 应用程序中 顶部的标题部分包含 selectOneMenu 底部的内容部分显示过滤器组件 默认情况下 应用程序首先在顶部显示 selectOneMenu 数据 在底部显示相应的 Filter 信息 如果用户选择不同的se
  • 将 RequestBody json 转换为对象 - Spring Boot

    我是 java 开发的初学者 但之前有 PHP 和 Python 等编程语言的经验 对于如何进行 Spring Boot 的开发几乎没有什么困惑 我正在开发一个rest API 它有以下请求 key value key1 value1 pl
  • 获取输入图像类型选择的图片并加载到图像标签中

    所以 我有一个用于上传 img 文件的输入框 我想要做的是从该数据 或选定的源 中获取数据并将其路由到图像标签的 src 属性中 像这样的东西 http jsfiddle net QC2c4 http jsfiddle net QC2c4
  • Elasticquent(ElasticSearch) Laravel 限制

    您好 我尝试使用 elasticSearch 查询获取所有结果 但如果 limit 值为 null 则仅返回 10 个结果 videos Video searchByQuery match gt field gt request gt fi
  • PHP strtotime +1 个月添加额外一个月[重复]

    这个问题在这里已经有答案了 我有一个简单的变量 可以将今天添加一个月 endOfCycle date Y m strtotime 1 month 今天是 2013 年 1 月 所以我希望返回 2013 02 但我得到的是 2013 03 我
  • 如何在引导程序中制作两个等高的列?

    我有这个代码 HTML div class container fluid div class row div class col md 6 p Line p p Line p p Line p p Line p p Line p p Li
  • 为什么在缩放的 html5 画布中可以看到伪像?

    我见过this https stackoverflow com questions 7615009 disable interpolation when scaling a canvas and this https stackoverfl
  • Python 模块 BeautifulSoup 提取锚点 href

    我正在使用 BeautifulSoup 模块通过以下方式从 html 选择所有 href def extract links html soup BeautifulSoup html anchors soup findAll a print
  • 检测 html 选择框上的编程更改

    有没有办法让 HTML 选择元素在每次以编程方式更改其选择时调用函数 当使用 JavaScript 修改选择框中的当前选择时 IE 和 FF 都不会触发 onchange 此外 更改选择的 js 函数是框架的一部分 因此我无法更改它以在结束
  • 使用 FormData 上传 JavaScript Blob

    我在将 javascript 创建的 blob 上传到我的服务器时遇到问题 基本思想是用户上传图像 在 javascript 中我对图像进行居中裁剪并在传输之前对其进行下采样 图像处理工作正常 但上传本身无法正常工作 这是执行从 canva
  • 引导网格中的绘图图周围有巨大的空白

    我有一个 Net 应用程序 我试图在其中使用创建一个图表bootstrap js and plotly js 当我创建响应式图表时 我遇到网格中存在巨大空白的问题 我发现问题的一部分是plotly svg container的大小默认高度为
  • 有没有办法重置特定类的所有静态属性?

    您可能知道 静态属性使测试变得困难 有没有办法将特定类的所有静态属性重置回其初始状态 理想情况下 这不需要为每个类定制代码 但可以通过继承以通用方式使用 或者完全从类外部使用 请不要回复 不要使用静态属性 之类的内容 谢谢 假设您正在使用
  • HTML 标签在 Ionic 5 警报文本中不起作用

    我已将以下代码从 Ionic 3 迁移到 Ionic 5 const alert await this alertCtrl create subHeader About b this user name b message Test Mes
  • 如何将 JSON 文本转换为 PHP 关联数组

    我将以下 JSON 对象存储在文本文件 data txt 中 player black time 0 from 2c to 3d 我使用 php 阅读 问题 有没有简单的方法可以转换 data到 PHP 关联数组 我尝试过使用json de

随机推荐

  • android中线程睡眠不一致

    我发现了有关 Thread sleep 的一些令人惊讶的事情 线程没有及时唤醒 让我解释 我创建一个活动 无服务 并运行如下所示的线程 Thread sleep 50000 50 seconds System out println som
  • 如何将包安装到 mvc core 2 中的 wwwroot

    最近我安装了VS 2017 其中包含Asp net mvc core 2 但这里存在一个非常混乱的问题 这就是我如何将新包安装到 wwwroot 中 我正在使用 Bower 但支持已结束 并且在使用 npm 配置后无法在项目 gt gt 新
  • 警告:此 可以替换为 标记

    我有一个FrameLayout其中包含一个TextView和两个LinearLayouts
  • 使用 Jquery.validate.js 验证电子邮件地址的格式 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我在用着jquery validate js http jqueryvalidation org email method 验证公式的电子
  • Xamarin Visual Studio 2017:无法添加跨平台视图页面

    所以我使用 Xamarin 跨平台应用程序模板 我想添加LoginPage xaml查看我的项目 所以我选择add gt new item gt contentpage 总是有错误 项目系统遇到错误 在项目的层次结构中找不到新元素 视图 L
  • 有条件地包括聚合管道阶段

    我有一个函数可以根据给定的参数给我一些订单 但是 参数可以为空 在这种情况下我想留下 match alone 这是我目前拥有的代码 if req query status typeof req query status array var
  • 如何重新创建类似 Pulse 的 UI?

    我想知道如何像应用程序一样通过表格显示图像Pulse http itunes apple com us app pulse news reader id371088673 mt 8在 iPhone 上 我用了UIScrollView但这并没
  • 在 Qt 中以编程方式设置 QLabel 的像素图

    我们应该用来显示图片的 Widget 是 QLabel 我们可以直接从 QtCreator 中通过设置其 pixmap 属性来完成此操作 我们应该首先创建一个资源文件 然后将图像添加到该资源文件中 要创建 Qt 资源文件 我们进入菜单 文件
  • Bootstrap 2的模态插件中心不显示

    我使用引导模式插件 但模式对话框未显示在中心 为什么 我的错 http dl dropbox com u 573972 stackoverflow bootstrap modal html http dl dropbox com u 573
  • 在 ElementTree 中使用 XPath

    我的 XML 文件如下所示
  • 在 Program.cs 中登录

    是否可以在 Program cs Main 方法中获取 ILogger 我想将其传递给在该方法内创建的服务 我只在SO上找到这个如何从 Startup cs 中写入日志 https stackoverflow com questions 4
  • 无法从 keycloak 建立到 Mailhog 的 SMTP 连接

    我有一个 docker compose 它包含 Keycloak 和 Mailhog 我在 Keycloak 中配置了 Mailhog 但它不起作用 我在 Powershell 中尝试了 MailHog 它有效 有人可以帮我弄清楚为什么它不
  • 如何通过 REST api 停止 Jenkins 中的构建?

    我在詹金斯有一份工作 我们自己的网站通过 REST API 触发此作业的构建 有时我们想中止构建 有时 可能是在构建开始之前 在这种情况下 我们有queueItem 而不是build 如何通过 REST API 执行此操作 如果构建已经开始
  • 在 Safari Mobile 10.3 上,粘性页脚可以滚动到屏幕之外

    我们的移动 Web 应用程序具有粘性底部导航 就像您在 iOS 应用程序中经常看到的那样 并且在 Safari 10 3 发布后仅横向可以将粘性导航 页脚 滚动到屏幕之外 尽管它是position fixed并设置bottom 0这在旧版
  • 获取 ZipInputStream 的大小

    在我们完全读取流之前 是否有办法找到 估计 ZipInputStream 的大小 例如 在读取用户数据之前 我们可以使用 getNextEntry 获取条目的元数据 Inputstream 有一个方法 available 来返回可以从此输入
  • 使用 bs4 查找特定链接文本

    我正在尝试抓取一个网站并找到提要的所有标题 我在获取文本时遇到问题a我需要的标签 这是 html 的示例 td class m a href QSYcfT target blank TF4 Oreos a a href font class
  • 使用 mysqli_error 调试 mysqli 查询或死亡

    我不知道出了什么问题 result db gt query INSERT INTO post items post id content date user id category id VALUES postid content date
  • 从特定路径加载强名称程序集?

    我有一个强命名的程序集 安装到特定文件夹 而不是 GAC Reflector 中显示的名称是 Foo Bar TreeFrog Version 1 2 1 0 Culture neutral PublicKeyToken ac88c4a8b
  • 这个宏包装展现了什么概念?

    一堆代码刚刚交给我 我对标头中的宏感到困惑 我无法理解它们的用途 define WRAPPER MACRO symbol symbol define ANOTHER SYMBOL WRAPPER MACRO ANOTHER SYMBOL d
  • 页面顶部的奇怪空白 – HTML、CSS 和 PHP

    好吧 这是我遇到的一个奇怪的问题 我有两个页面 略有不同 但共享几个相同的元素 基本上是两个图像 这些图像都由相同的 CSS 样式表控制 但是 它们在第二页上似乎都低了约 20 30 像素 第二个页面的不同之处在于它使用 PHPbefore