CSS 问题,填写表单时标题会上升

2024-03-31

我有一个奇怪的 CSS 问题,我不太确定如何解决这个问题。

当我按下网站上的“登录”按钮并开始输入用户名时,标题会上升。我真的不知道是什么原因造成的。

有任何想法吗?

Thanks!

这是一些代码:

表格:

.tooltip-wrap {
  position: fixed;
  display:none;
}

.tooltip-wrap .corner {
    position:relative;
    z-index:100;
    margin-left:-5px;
    width:0;
    height:0;
    border:5px solid transparent;
    border-bottom-color:#fff;
}

.tooltip-text { 
    float:left;
    margin-left:-50%;
    padding:1em 15px;
    background:#fff;
    color:#333;
}

这是上升的部分:

.header-navigation.back {
    z-index:-1;
    position:absolute;
    margin-left:0;
    margin-top:-6px;
    border:none;
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('xhttp://frenchegg.com/images/backmenu.png');
}

您需要单击“用户名”并开始输入内容。


非常奇怪的错误,我无法解释发生了什么。但这与你的div.header-navigation.back。如果删除它,该行为就会消失。

据我所知,您仅将该元素用作背景图像,因此无论如何将其包含在标记中都不是一个好主意。如果您修改您的.site-header您无需额外的即可达到相同的效果div:

.site-header {
   background: #0894ff url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat;
   background: url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat,
               linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
}

我不太清楚你想用渐变实现什么,但想法是为支持它们的浏览器提供多种背景,并回退到纯色。

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

CSS 问题,填写表单时标题会上升 的相关文章

  • a:active 不起作用

    我在这里很困惑 the a active不工作 但是 hover工作正常 我已经尝试了很多事情 但这个让我陷入困境 而且真的很令人困惑 我刚刚在表中添加了链接 我已将单元格添加到了类中 menu1 现在 当我访问活动页面时 活动链接不会突出
  • 将 html 转换为 pdf 时防止表格单元格跨页破坏

    使用 Google Apps 脚本 我有一个 html 模板 我填写该模板 然后以 pdf 形式发送 通过传真和 或电子邮件 该模板包括一个带有问题 答案的两列表格 如果行数足够多 表格会在pdf中跨页分页 并且分页符通常发生在单元格的中间
  • ReactTable 修复了最后一行

    我正在使用 ReactTable 最后我需要创建一些摘要 当分页存在时 它每次都应该可见 可以用react table来实现吗 我可以通过创建下一个表来部分解决这个问题 但我没有找到如何隐藏标题的方法 另一个问题是调整列宽度时 它不会应用于
  • :hover 状态在 iOS 上不会结束

    我有一个带有悬停状态的简单菜单
  • 您能否确定 CSS 文件的范围,使其仅适用于给定元素的后代?

    给定一个 css 文件 有没有办法限制整个文件的范围 使其仅适用于给定元素内的元素 例如给定 div span class some element span div 有没有一种方法可以将整个 css 文件的范围应用于 容器 中的所有元素
  • Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Headers

    我试图通过发布请求将文件发送到我的服务器 但是当它发送时会导致错误 Access Control Allow Headers 不允许请求标头字段 Content Type 所以我用谷歌搜索了错误并添加了标题 http post rootSc
  • 有 CSS 父选择器吗?

    我该如何选择 li 元素是锚元素的直接父元素 举个例子 我的 CSS 应该是这样的 li lt a active property value 显然 有多种方法可以使用 JavaScript 实现此目的 但我希望 CSS Level 2 本
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到
  • 如何保留用户的输入打印?

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div
  • 可以将position:absolute元素设为粘性吗?

    In CSS position sticky使元素能够显示position static行为 即 它采用文档流中的默认位置 直到到达某个滚动位置 然后采用position fixed行为 那么 这是否意味着我们不能使用position st
  • 删除特定数据表上的所有边框

    我需要使用 PrimeFaces 隐藏一个数据表的所有边框 而不是全部 我尝试了很多事情 但没有人奏效 有谁知道该怎么做 我已将以下样式 单独 应用于ui datatable class border hidden important bo
  • 浮动图像周围具有最小列宽的流动文本

    我想要一种方法来防止流动文本列变得太窄 例如 在一列 HTML 文本中 有一个图像浮动到左侧 正如预期的那样 文本沿着图像周围的列的右侧向下流动 但是 如果图像几乎与列一样宽 则文本最终会非常窄 在这种情况下 我希望文本简单地not流过图像
  • 滚动时的 CSS 背景模糊

    我有固定的背景图像 滚动时我希望图像变得模糊 我知道如何在 css 中进行模糊 但在特定的滚动位置进行 这是一个例子 https medium com good music f160ba9e6c52 https medium com goo
  • 如何在Yii框架中向Form添加类?

    我在 Yii 中有一个表单 我想向该表单添加一个类
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • 如何使使用 css 调整大小的图像在 IE 中看起来不错?

    当使用 css 宽度 高度或属性宽度 高度缩放图像时 IE6 和 IE7 无法很好地缩放网页中的图像 我不确定它默认使用哪种算法 但这不好 在这些浏览器中缩放时 缩放图像会显示锯齿伪影 幸运的是 有一种方法可以通过简单的 css 规则强制
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮

随机推荐

  • 正确预防 PHP 中的邮件注入

    你能告诉我如何预防吗电子邮件注入 http en wikipedia org wiki Email injection in PHP mail 而不丢失原始消息数据 例如 如果我需要允许用户使用 r n To CC等等 所以我不想将它们完全
  • VS 2015 中未解决 Microsoft.NETCORE.app 依赖关系

    我在使用 Visual Studio 2015 时遇到问题 当我创建新的 CORE 1 0 项目时 引用显示错误 指出 NETCoreApp 无法解析 当我打开project json 文件时 Microsoft NETCore App 带
  • 在页面内容上方浮动一个 div [重复]

    这个问题在这里已经有答案了 我实现了一个动态显示搜索选项的弹出框 我希望该框 浮动 在所有网站内容之上 目前 当显示该框时 它会取代其下方的所有内容 并且看起来很糟糕 我相信我已经尝试将框的 div 的 z index 设置为高于其余页面内
  • 恢复 SQL Server 2005 数据库后将所有用户链接到登录

    请注意 此问题询问有关链接所有用户的问题 这与询问有关链接单个用户的可能重复问题不同 我希望在两台服务器之间移动数据库 我已经从第一台服务器备份了数据库 并在第二台服务器上进行了数据库恢复 到目前为止一切顺利 然而 我们的应用程序使用了数据
  • 在后台使用 prawn 和 resque 生成 pdf

    我正在尝试通过 Resque 后台作业在后台创建 PDF 文档 我用于创建 PDF 的代码位于 Rails 辅助方法中 我想在 Resque 工作线程中使用该方法 例如 class DocumentCreator queue documen
  • php循环列表中的随机产品[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我有来自女巫的产品列表 我需要随机显
  • Android 底页 - 滚动问题

    我需要底部纸张停在两个位置 我有以下底页代码
  • 关于 .git/HEAD 的存储库:错误:清单丢失或不可读 - 请运行 init

    我正在使用repo 在ubuntu中 下载android 4 4源代码 上次我通过按组合键 Ctrl Z 终止了 repo 进程 这次当我使用命令 repo init 和 reposync 启动它时 出现以下错误 错误 在sync Errn
  • AtomicReferenceArray 的工作原理

    我想知道 AtomicReferenceArray 是否可以用作 ConcurrentLinkedQueue 的替代品 如果可以使用有界结构 我目前有类似的东西 ConcurrentLinkedQueue
  • UITableView tableHeaderView 中的 UIButton 不响应触摸

    好吧 我觉得自己像个白痴 我无法让这个工作正常进行 而且 SO 上的其他答案都没有让我得到任何帮助 我有一个非常简单的UIView我已经在 xib 中定义并加载为tableHeaderView of my UITableViewContro
  • 从 oracle 表中恢复已删除的行

    是否可以从 oracle 表中恢复已删除的行 我的数据存储在表 MANUAL TRANSACTIONS 中 架构名称是 CCO 我不小心删除了表中的 50 万行 并且也进行了提交 现在我想恢复它们 我正在使用 Oracle 11g R2 谢
  • 为什么 Clippy 建议传递 Arc 作为参考?

    我正在检查我的代码中的 Clippy 发现 发现迂腐的规则needless pass by value https rust lang github io rust clippy master index html needless pas
  • 如何使用 Puppeteer 读取 span 元素的值

    我正在尝试进行一些网页抓取 读取 html 页面内的一些行 我需要寻找在某些页面中重复出现的文本 span 元素 在下面的示例中 我想以 文本编号 1 文本编号 2 文本编号 3 的字符串数组结尾 span Text number 1 sp
  • 用于多种翻译的可翻译实体和形式

    考虑来自以下位置的 Category 实体及其 CategoryTranslation 实体 http github com l3pp4rd DoctrineExtensions blob master doc translatable m
  • 在快速帮助文档注释中添加 Swift 类的链接?

    假设我有两个课程 This class should be used together with Foo class Bar func doNothing Description of what Foo does goes here cla
  • 通过 PHP 连接时用户的 MS SQL Native Client 登录失败

    我有一个带有 IIS 7 5 MS SQL 2012 Express 的 Windows 2008 R2 Datacenter 服务器 使用 PHP 5 6 尝试通过 Windows 身份验证连接到我创建的数据库 testDB 但未能这样做
  • “错误”类型的值没有成员“代码”[重复]

    这个问题在这里已经有答案了 我正在将一个测试应用程序移至 Xcode 8 Beta 5 并将我的代码转换为 Swift 3 关于切换到 Swift 3 我留下了一些错误Error from NSError 我在 Xcode 中收到错误消息
  • Rspec any_instance.stub 引发 nil:NilClass 异常的未定义方法 `any_instance_recorder_for'

    这是我正在测试的类Foo rb class Foo def bar return 2 end end 这是我的测试包含在Foo spec rb require Foo rb describe Foo do before all do put
  • 使用 sed 删除两个模式之间的行(不包括)

    Ok 我知道这是一个微不足道的问题 但是 我如何从文件中删除两个已知模式 单词之间的行 pattern1垃圾模式2 获得 pattern1模式2 有谁知道学习 sed 的好 简单的 资源吗 有很多清晰的例子吗 sed n pattern1
  • CSS 问题,填写表单时标题会上升

    我有一个奇怪的 CSS 问题 我不太确定如何解决这个问题 当我按下网站上的 登录 按钮并开始输入用户名时 标题会上升 我真的不知道是什么原因造成的 有任何想法吗 Thanks 这是一些代码 表格 tooltip wrap position