页面顶部的奇怪空白 – 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 的相关文章

  • PHP Solr PECL 扩展安装

    我已经使用命令安装了 pecl solr pecl install solr 和梨使用 wget http pear php net go pear phar php go pear phar 重启Apache后 我仍然收到错误 Fatal
  • 如何在其他div id的悬停中使用div显示块

    如何打开div悬停时标记href tag 这是我在悬停 href 标签上显示 div 标签的代码 Services is id of href tag Services is id of div tag Service hover Serv
  • CSS 继承、别名和其他很酷的东西

    有一天 我随机浏览网页 发现了一些程序 可以让你编写 CSS 别名和其他很酷的东西 我现在不记得了 举个例子 我记得你可以这样做 myclass background color red greenfont 其中 greenfont 在其他
  • 使用 XSLT 将 XML 转换为 SQL

    由于我无法控制的原因 我将获得一个 XML 文件和一个 XSLT 文件 该文件可以将 XML 文件转换为 SQL 代码或错误 现在让我们假设我们可以信任提供 XML 文件的人不会在 XML 中包含危险的构造 我什至不知道是否应该使用 Sim
  • 滚动时的 CSS 背景模糊

    我有固定的背景图像 滚动时我希望图像变得模糊 我知道如何在 css 中进行模糊 但在特定的滚动位置进行 这是一个例子 https medium com good music f160ba9e6c52 https medium com goo
  • 固定 div 位于居中 div 旁边

    我有一个网页 其中有可滚动的内容 此内容包含在 content 内 位于页面的中心 现在我希望导航栏出现在内容左侧 50 像素处 该栏应具有固定位置 不应滚动 这是我到目前为止所尝试过的 nav position fixed top 50
  • 强制 Composer 下载 git repo 而不是 zip

    我对作曲家有一些问题 require php gt 5 3 2 kriswallsmith buzz 0 7 Repo https github com kriswallsmith Buzz tree v0 7 https github c
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • 如何在 OS X 上使用 OpenSSL 1.0.1 编译 PHP 5.5.19

    我已经安装了 OpenSSL 1 0 1j usr local ssl现在我尝试使用此版本的 OpenSSL 编译 PHP 5 5 19 这是我的配置过程 export CFLAGS arch x86 64 export CXXFLAGS
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • 使用 CSS 的响应式图像

    我发现调整图像大小以使其具有响应能力很棘手 我正在开发一个 php 应用程序来自动将网站转换为响应式版本 我有点被图像困住了 我已经成功地为网站上的每个图像添加了一个包装类 并且可以很好地调整图像的大小 我的问题在于自然小于窗口的图像 例如
  • URL 中的 %2F 中断并且未引用所需的 .php 文件 [重复]

    这个问题在这里已经有答案了 我需要将 作为变量作为 URL 的一部分传递 我的结构如下所示 www domain com listings page 1 city Burnaby South type Townhome bedroom 2
  • 保存多对多关系,同步/附加不存在?

    我有以下两个多对多关系的模型 use Illuminate Database Eloquent Model class Permission extends Model The database table used by the mode
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • Laravel $request->file() 返回 null

    尝试在后端使用 Laravel 上传文件时遇到问题 Issue Laravel request gt file 方法返回 null Setup 我使用以下方法构建了一个 AJAX 请求超级代理人 https github com visio
  • 一种无需 JavaScript 即可在 PHP 中确定浏览器宽度的方法?

    首先有吗 或者我必须使用javascript 我希望能够更改使用的 CSS 因此 frex 我可以为移动设备或其他设备加载较小的字体 不幸的是 仅使用 PHP 无法检测用户分辨率 如果您使用 Javascript 则可以在 cookie 中
  • 禁用允许文本选择的

    残疾人可以吗

随机推荐

  • 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