跳过在 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 中不起作用的链接 的相关文章

  • 如何在 PHP 的 HTML 页面中显示错误消息?

    我有以下登录表单 login php 其中要求输入用户名和密码
  • 指南针字体输出错误的字体文件路径

    font face font family HelveticaNeueLTStd Lt src url css fonts HelveticaNeueLTStd Lt otf format opentype 这是我的指南针代码的输出 inc
  • 使用 highcharts 时,为什么 Bootstrap 选项卡显示宽度不正确的选项卡窗格 div?

    因此 我正在使用 Twitter 的 Bootstrap 创建一个包含选项卡式内容的页面 但我的起始活动 div 的内容始终与其他选项卡的内容不同 例如 我在不同的选项卡中使用 highcharts js 放入图表 但活动选项卡始终显示正确
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • 当共享相同的行和列时,将网格项设置为不重叠

    现在 当两个网格项共享相同的行和列时 它们会相互重叠 div class some grid container div Item 1 div div Item 2 div div 我如何让它们不重叠 当共享相同的行和列时 其行为可能类似于
  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些
  • 我如何能够以两行显示标题,并且每行的字体大小不同?

    我正在使用 Google Chart API 创建时间线图 并希望将图的标题修改为两行 问题 我如何能够显示具有不同字体大小的两线图表标题 电流输出 理想输出 相关研究 我唯一能找到的是有人试图用饼图来做到这一点 但我尝试了但无法使其发挥作
  • 如何使用 JavaScript 创建链接?

    我有一个标题字符串和一个链接字符串 我不知道如何将两者放在一起以使用 JavaScript 在页面上创建链接 任何帮助表示赞赏 我试图解决这个问题的原因是因为我有一个 RSS 源并且有一个标题和 URL 列表 我想将标题链接到 URL 以使
  • socket.io 的良好初学者教程? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • @media语法/可能的组合

    我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope
  • 使用 css 简单地将对象居中,无需修改

    我想使用 CSS 将对象居中 而不需要任何技巧 这可能吗 如何实现 我已经尝试过了 但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中 但这取决于您的元素是什么以
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • CSS 类命名约定

    在网页上 有两个控件块 主要和次要 大多数人会使用什么类名 选择一 div class primary controls div
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • CSS溢出文本显示在几行中,没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n
  • 在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用

    我目前正在我的笔记本电脑 台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询 除了 Nexus 7 之外 它们在台式机和笔记本电脑上都运行良好 当我更改方向时 除非刷新页面 否则样式不会应用 例如 以纵向模式握住设备时 页面正常

随机推荐

  • 如何在没有 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但遗憾的是它似乎没有提供任何解决方