跳过在 Chrome 中不起作用的链接

2024-05-09

首先,我看过上一个问题 https://stackoverflow.com/questions/3572843/skip-navigation-link-not-working-in-google-chrome但遗憾的是它似乎没有提供任何解决方案(除了 JS 之外,我担心这是一个不可能的解决方案)

我的页面顶部有一些跳过链接...

<ul>
<li class="skip-link"><a href="#mainContent" accesskey="S"><span>Skip to main content</span></a></li>
<li class="skip-link"><a href="#main-navigation" accesskey="N"><span>Skip to main navigation</span></a></li>
</ul>

再往下还有……

<div id="mainContent"></div>

这是一个空的 div,纯粹用作锚点。

当链接被激活时,一切似乎都工作正常;视觉上页面向下跳转,焦点转移到#mainContent之后的第一个链接。

然而,在 Chrome (v 12.0.742.91) 中,虽然页面在视觉上向下移动,但焦点并未向下移动,这意味着在激活快捷键后,再次按 Tab 键只会跳回页面顶部并返回访问链接。

我在 IE 上也遇到了同样的问题,原因是一个已知的怪癖 http://webaim.org/techniques/skipnav/#iequirk并通过为目标元素设置特定宽度来修复。然而,这似乎不适用于 Chrome。我还尝试在 #mainContent div 中添加可选项卡元素,在 #mainContent div 中放入任何类型的内容,以及各种浮动/宽度/高度变化,但似乎没有任何方法可以修复它。

有人在使用 Chrome 时遇到过类似问题或知道解决方法吗?

提前感谢各位

Simon


The best you can do until someone find a trick/hack is starring this issue https://code.google.com/p/chromium/issues/detail?id=262171 which succeeded this one http://code.google.com/p/chromium/issues/detail?id=37721. Your SO fellows will probably do the same because they care.

显然,终于到了fixed https://bugs.chromium.org/p/chromium/issues/detail?id=454172#c22.

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

跳过在 Chrome 中不起作用的链接 的相关文章

  • 增加数字输入、CSS、HTML 上的向下和向上箭头的大小

    有没有办法利用CSS来增大数字输入框右侧的上下箭头的大小 只是向上和向下箭头 而不是整个输入框 或者至少是按比例的 看这个例子 size 36 font size 36px size 12 font size 12px
  • 动态表单标签宽度的 CSS

    我目前正在重构我们的表单控制器之一 以便我们可以将其用于面向公众的网站 目前它正在为表单生成表格布局 但我正在尝试使用 CSS 表单来完成它 我正在尝试重现看起来像这样的东西http www stylephreak com uploads
  • 根据变量值将 LESS 编译为多个 CSS 文件

    有一个指定颜色的变量variables less文件 例如 themeColor B30F55 和一个 json构成实体列表的文件 其中每个键是一个实体 ID 键的值是该实体的颜色 例如 8ab834f32 B30F55 3cc734f31
  • CSS:水平滚动时背景不存在

    好的 我的背景设置如下 HTML div div CONTENT HERE div div CSS container background url image gif content width 800px margin auto 因此
  • CSS设置默认滚动位置

    有没有办法将滚动位置设置为默认值 我知道如何在 javascript 中做到这一点 例如使用 jquery div divWithScroll attr scrollTop 200 但我只想用CSS来做 我不知道是否可行 不 CSS 中没有
  • 如何在HTML中的PHP中注释掉HTML和PHP?

    这是我想注释掉的一行代码 h1 class post title a href title a h1 一种流行的注释方法是分别注释 html 和 php 有一个更好的方法吗
  • VBA / HTML / jQuery 选择自动完成 - 在列表中选择

    我正在尝试使用 Excel 中的 VBA 在网站的列表中选择一个值 这不是一个 正常列表 该网站使用 jQuery 选择自动完成 如下所示 example http davidwalsh name demo jquery chosen ph
  • 为什么需要重置浏览器?

    好吧 我知道这可能不是最好的标题why我们需要重置浏览器 因为浏览器有不同的默认设置 我的问题太长 无法放入标题中 如果每个人 90 的时间都需要使用重置样式表 为什么浏览器需要设置默认样式 无论如何我们都会删除它们 对吗 因为某些规则默认
  • 如何为背景图像添加边距?

    我想向背景图像添加边距 以便将其与屏幕中间保持距离 但将其添加到该类中会为整个主体添加边距 body poppage background url Imagenes tip3 png 50 200px no repeat E2E4E9 我怎
  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • JavaScript 中数组的 HTML 数据列表值

    我有一个简单的程序 它必须从服务器上的文本文件中获取值 然后将数据列表填充为输入文本字段中的选择 为此 我想要采取的第一步是我想知道如何动态地将 JavaScript 数组用作数据列表选项 我的代码是
  • 如何在背景剪辑中包含文本装饰:文本;影响?

    我在用 webkit background clip text border and color transparent在锚标记上 下划线似乎永远不可见 我想要的是将文本装饰包含在背景剪辑中 这是我的CSS background clip
  • 我可以停止 :hover 应用于元素吗?

    假设我有一些 CSS button hover font weight bold 我怎样才能防止 hover随意应用样式 我的目标用例是当元素被禁用时 例如 使用这个 HTML
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • 优雅降级 - 何时考虑

    在为使用 AJAX 的应用程序设计和构建 UI 时 您何时考虑优雅降级 对于禁用 JavaScript 或正在使用屏幕阅读器的用户 最后 网站的 AJAX 版本完全完成后 在每个发展阶段 I don t 还有别的事 这些日子 渐进增强 ht
  • 单击引导分页链接时调用 jquery 函数

    我想在单击引导分页链接时调用 jquery 函数 假设我想从第1页遍历到第2页 应该调用一个jquery函数 我正在使用以下代码 但它不起作用 ul pagination on click li function alert page ch
  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG
  • 显示覆盖以覆盖整个页面

    我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di
  • HTML 默认图像大小

    我在我的代码上显示 3 张图片 图片具有不同的尺寸 宽度和高度 div class row div class col lg 12 h2 class page header Gallery h2 div div class col md 4

随机推荐

  • 如何在没有 SyncAdapter 的 Android 上实现帐户

    我正在利用内置帐户系统 使用 AccountManager API 为 Android 应用程序实现一个登录系统 在 Android 2 2 上一切都很好 但在 Android 2 1 上不包含 SyncAdapter 会导致帐户设置屏幕中
  • 新的 Windows 应用程序 - 什么语言?

    我们目前正处于开发 Windows 桌面应用程序的前期阶段 但当听到有关 Windows 8 Silverlight WPF Jupiter 的所有最新讨论时 我不知道该相信什么了 现在用WPF启动一个新项目是不是有问题 我应该切换到 Si
  • 检查多个位置的值并仅在源唯一时返回匹配项

    假设我有一个清单Vendors 阿斯达 乐购 Spar 我有一个清单Sources 或者这个类比中的供应商 家乐氏 Kellogg 吉百利 Cadbury 雀巢 Nestle 强生 Johnsons 帮宝适 Pampers Simple 等
  • Git推送更新远程服务器信息失败

    当我尝试将新分支推送到远程源时 出现以下错误 我能够在现有分支上推送提交 并且现有分支上没有问题 git push u origin master1 Fetching remote heads refs refs tags refs hea
  • Ajax 将文件上传到内容类型为 Multipart 的 GoLang 服务器

    我正在尝试使用多部分表单将音频文件上传到 Golang 服务器 然而 Go 返回错误 multipart NextPart bufio buffer full 我相信这表明我的 Javascript 请求中存在不属于多部分格式的内容 这是我
  • Java 中的递归下降解析器

    我想在序言中说这是我三年级编程语言课的家庭作业 我正在寻求一些帮助 我的作业如下 截止日期 2013年2月22日晚上11点55分提交 请将以下内容上传到CMS 1 源代码2 程序执行的屏幕截图 包括您使用的输入文件 使用您喜欢的任何编程语言
  • Firebase 云消息传递 requireInteraction 不起作用

    参考 https github com firebase quickstart js tree master messaging https github com firebase quickstart js tree master mes
  • 调整双 JTable 中列大小的问题

    我正在创建一个包含 2 个 JTable 的自定义组件 一个作为主数据网格 另一个作为始终可见的摘要栏 我已经提出了这个解决方案 但是调整列大小并没有按应有的方式工作 任何想法我做错了什么 import java awt BorderLay
  • C 编程:正向变量参数列表

    我正在尝试编写一个函数 它接受可变数量的参数 如 printf 执行一些操作 然后将变量列表传递给 printf 我不知道如何做到这一点 因为它似乎必须将它们推入堆栈 大约是这样的 http pastie org 694844 http p
  • C++ 中的默认初始化

    我有一个关于 C 中默认初始化的问题 我被告知非 POD 对象将自动初始化 但我对下面的代码感到困惑 为什么当我使用指针时 变量 i 被初始化为 0 但是当我声明局部变量时 却不是 我使用 g 作为编译器 class INT public
  • 异步任务、视频缓冲

    我正在尝试理解 C 中的任务 但仍然遇到一些问题 我正在尝试创建一个包含视频的应用程序 主要目的是从文件中读取视频 我使用 Emgu CV 并通过 TCP IP 发送它以在板上进行处理 然后以流 实时 方式返回 首先 我是连续做的 所以 读
  • 在 JavaScript 中从字符串的开头到结尾删除 HTML 内容组

    我需要一个可以从头到尾删除完整标签的正则表达式 例如 对于给定的字符串 var str Hello World 我需要一个输出 Hello World with full script tag including inner content
  • Html 文本输入撤消不起作用

    我遇到一个问题 html 文本框和文本区域的撤消功能 ctrl z 和右键单击 gt 撤消 被禁用 这种情况发生在 ASP NET 生成的页面上 其中包含大量 Silverlight JavaScript JQuery 和 Ajax 大约
  • 响应式图像悬停 - CSS/JQuery

    我按照这个教程 http mattbango com notebook code hover zoom effect with jquery and css http mattbango com notebook code hover zo
  • 尝试映射大页面 (1GB) 时 mmap 失败

    我做了什么 使用 root 启用大页 我的系统支持 1MB 大页 echo 20 gt proc sys vm nr hugepages 将大页文件系统挂载到 mnt hugepages mount t hugetlbfs nodev mn
  • 如何在node.js中使用window.sessionstorage

    我使用 JavaScript 将哈希存储在会话存储中 如下所示 window sessionStorage setItem test true 如何使用 node js 读取此密钥 你不知道 会话存储 https developer moz
  • Scala:获取 Map.head 元素的键(和值)

    让我们想象一下以下不可变的 Map val foo Map 10 ten 100 one hundred 我想获得第一个元素的密钥 foo head获取第一个元素 但接下来呢 我还想要这个元素的值 即 十 设置键 值对 val key va
  • 使用 href 和 php 从 sql 数据库对 html 表进行排序

    我有一个 html 表 其中包含来自 php 吐出的 sql 表的产品数据 我想通过单击表列的标题对数据进行排序 我像这样输出我的表 php product list sql mysql query SELECT FROM products
  • 如何转发元组的类型以专门化其他模板?

    目前我正在研究一种动态容器结构 它表示一个 pod 值或具有相同容器类型的指针向量 容器有一个接口optional
  • 跳过在 Chrome 中不起作用的链接

    首先 我看过上一个问题 https stackoverflow com questions 3572843 skip navigation link not working in google chrome但遗憾的是它似乎没有提供任何解决方