首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当网格行未嵌套在网格中时,NVDA屏幕阅读器和Chrome86/87似乎不支持自有网格和网格

当网格行未嵌套在网格中时,NVDA屏幕阅读器和Chrome86/87似乎不支持自有网格和网格。

在网页开发中,网格布局(Grid Layout)是一种强大的布局方式,可以将页面划分为行和列,使得元素可以在网格中自由地定位和对齐。然而,当网格行未嵌套在网格中时,即没有包含在网格容器中,NVDA屏幕阅读器和Chrome86/87似乎不支持自有网格和网格。

NVDA屏幕阅读器是一款流行的开源屏幕阅读器,用于帮助视觉障碍用户访问计算机和互联网内容。Chrome86/87是Google Chrome浏览器的版本,是一款广泛使用的网络浏览器。

自有网格是指直接在元素上定义的网格布局,而不是在父容器上定义的。网格布局的优势在于可以灵活地控制元素的位置和对齐方式,适用于复杂的页面布局需求。

然而,根据提供的信息,当网格行未嵌套在网格中时,NVDA屏幕阅读器和Chrome86/87似乎不支持自有网格和网格。这可能意味着在这种情况下,屏幕阅读器和浏览器无法正确解析和呈现自有网格和网格布局,可能导致布局错乱或无法正常显示。

针对这个问题,可以考虑以下解决方案:

  1. 嵌套网格:将网格行嵌套在网格容器中,确保网格布局的正确性和可访问性。通过在父容器上定义网格布局,然后在子元素中定义网格行,可以避免上述兼容性问题。
  2. 使用其他布局方式:如果自有网格和网格布局在特定情况下无法使用,可以考虑使用其他布局方式,如Flexbox布局或传统的盒模型布局。
  3. 浏览器和屏幕阅读器的更新:随着浏览器和屏幕阅读器的不断更新和升级,可能会修复这种兼容性问题。因此,建议使用最新版本的浏览器和屏幕阅读器,并及时更新。

腾讯云相关产品和产品介绍链接地址:

腾讯云提供了丰富的云计算产品和服务,包括云服务器、云数据库、云存储、人工智能等。以下是一些相关产品和对应的介绍链接地址:

  1. 云服务器(ECS):提供弹性计算能力,支持按需购买和弹性扩展。详情请参考:https://cloud.tencent.com/product/cvm
  2. 云数据库(CDB):提供高可用、可扩展的数据库服务,支持多种数据库引擎。详情请参考:https://cloud.tencent.com/product/cdb
  3. 云存储(COS):提供安全可靠的对象存储服务,适用于存储和管理各种类型的数据。详情请参考:https://cloud.tencent.com/product/cos
  4. 人工智能(AI):腾讯云提供了多个人工智能相关的产品和服务,包括图像识别、语音识别、自然语言处理等。详情请参考:https://cloud.tencent.com/product/ai

请注意,以上链接仅为示例,具体产品和服务选择应根据实际需求进行评估和选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【译】W3C WAI-ARIA最佳实践 -- 布局

一个原因是当用户与 grid 交互屏幕阅读器需要处于应用阅读模式,而不是文档阅读模式,这非常重要。应用阅读模式屏幕阅读器用户只能发现可聚焦的元素标记可聚焦元素的内容。...因此,屏幕阅读器用户可能会在不知情的情况下忽略网格包含的元素,它们不可聚焦或不用于标记列或。 数据网格键盘交互 以下键通过在网格的单元格之间移动焦点来提供网格导航。...一组控件视觉上呈现为一个组合,可以使用 toolbar 角色来告知屏幕阅读器用户分组的呈现目的。组合控件到工具栏,键盘交互是一个减少Tab停留数量的有效方式。...且仅组合包含三个或三个以上的控件,才能使用工具栏作为分组元素。 键盘交互 工具栏获取焦点,焦点被设置第一个可用控件上。...般来说,使用键盘进行导航,不可用元素不可聚焦。但是,某些需要发现功能的场景,如果不可用元素可聚焦,可以帮助屏幕阅读器用户发现这些功能的存在。

6.1K50

响应式网页bootstrap

响应式网页设计 根据设备尺寸,自动调整布局,有bootstrapfoundation等 bootstrap没有自定义标签,主要通过css扩展class foundation不兼容旧版本的ie 网格系统...相当于C#UI里面的容器系统,bootstrap对css进行扩展,使用了类似less文件的变量定义,sacc不仅增加了变量还多了继承、混合、嵌套等功能 布局必须row包含col,不能单独col...bootstrap网格系统 col- 针对所有设备 col-sm- 平板 - 屏幕宽度等于或大于 576px col-md- 桌面显示器 - 屏幕宽度等于或大于 768px) col-lg- 大桌面显示器...- 屏幕宽度等于或大于 992px) col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px) 针对每一设置,container (固定宽度) 或 container-fluid (全屏宽度...speech用于屏幕阅读器 移动端viewport自适应

6.8K30

你现在可以玩下这 5 个 CSS 新功能

: subgrid; } grid-columngrid-row属性定义了网格项目在网格列或的位置。...它使.grid-item的子级包含在网格布局: image.png 子网格已成为网格布局的一部分,并且已定位到我们想要的确切位置(第二第四条垂直网格线之间,以及第一第三条水平网格线之间)。...它有三个值: visible — 元素渲染正常进行 hidden— 跳过元素渲染,无论是屏幕外还是屏幕上 auto — 元素屏幕,将跳过其渲染; 它出现在屏幕,将自动渲染 可以简单地将...元素接近视口,浏览器不再增加大小限制,而是开始绘制并命中测试元素的内容。这使得渲染工作能够及时被用户看到。...你可以已经支持该功能的浏览器实现性能上的优化(可以使用@supports规则测试浏览器支持),并且不会影响尚不支持该功能的浏览器。 总而言之,CSS新特性的标准化实现过程值得我们不断关注。

47430

5 个 CSS 新功能

: subgrid; } grid-columngrid-row属性定义了网格项目在网格列或的位置。...它使.grid-item的子级包含在网格布局: 子网格已成为网格布局的一部分,并且已定位到我们想要的确切位置(第二第四条垂直网格线之间,以及第一第三条水平网格线之间)。...它有三个值: visible — 元素渲染正常进行 hidden— 跳过元素渲染,无论是屏幕外还是屏幕上 auto — 元素屏幕,将跳过其渲染; 它出现在屏幕,将自动渲染 可以简单地将...元素接近视口,浏览器不再增加大小限制,而是开始绘制并命中测试元素的内容。这使得渲染工作能够及时被用户看到。...你可以已经支持该功能的浏览器实现性能上的优化(可以使用@supports规则测试浏览器支持),并且不会影响尚不支持该功能的浏览器。 总而言之,CSS新特性的标准化实现过程值得我们不断关注。

1.6K30

使用 SwiftUI 的 Eager Grids

单元格视图仅在它们被滚动创建,并且它们滚动停止计算。 这篇文章的主题 Eager Grids 正好相反。SwiftUI 不在乎它们是屏幕上还是屏幕外。所有视图都被同等对待。...例如,Eager Grids支持列跨越,而lazy grids不支持。归根结底,性能并不是唯一需要考虑的因素。本文中,我们将探索这些新网格,以便您在选择其中一个做出明智的决定。...尽管这里的大多数示例都可以,但每一可以包含任意数量的单元格。 探索网格选项 以下部分,我们将探讨不同的网格大小、对齐跨越选项。...请注意,我们通常不希望分隔线使网格增长到最大值,因此我们使视图水平轴上调整大小。这将使分隔线与最宽的一样宽,但不会更宽。...然而,今年还引入了一个新的布局协议,将我们的视图放置屏幕,它提供了更多的选择。我们将在以后的文章对此进行探讨。同时,我希望您喜欢这篇文章和 Grid 教练应用程序。 - EOF -

4.4K20

前端-CSS Grid的陷阱绊脚石

重要的是你想在布局里面的项目分配空间相互关联。 网格轨道大小是否由内容来决定? 我们已经看到了如何在使用网格布局容器上设置网格网格大小。但是,网格的项可以指定网格轨道大小。...传给minmax()函数的第一个值,它是网格轨道最小的值,第二个值是网格轨道最大的值。因此,你可以设置200px的,但通过auto设置为网格轨道最大值,那么有较多的内容,不会出现内容溢出。...下面的这个示例,我在网格通过伪元素来完成,将其放置基于的位置,然后添加一个背景边框到该网格区域。...很多情况下,隐式显式网格的渲染行为是相同的,对于很多的布局,你会发现你定义了列,然后允许将创建为隐式网格。不同的是,当你开始使用负的行号来引用网格的最后一,你会发现还是有一定区别的。...不过,大多数情况下,可以使用较老的方法来为不支持的设备创建一个简单的降级处理,而不需要创建两个完全不同的CSS代码。

4.8K20

CSS Flexbox 布局完全指南 (一):4000字,多示例讲解

假定 main.gallery 覆盖整个可见屏幕。....row 里的每个元素也就是 Flex 元素,所有的 Flex 元素都平均分布。...应用 .row\_cell — top 类可以让特定的元素 row 内靠顶部对齐 你一定有标识文本给特定元素加上这个类。...整行的三个元素都靠底部对齐 嵌套网格 只需要简单的设置,rows(元素)就可以嵌套布局。 ? 一内有两个元素,其中一个是另一个的两倍大小。...一三个元素居中嵌套排列较大的元素里 你可以在这里查看最终的布局效果。 更多网格布局 当你可以用 Flexbox 垂直网格甚至更复杂的参数实现好看的网格构造,就可以把这个很好的工具用于工作。

4.4K20

如何使用Grid的repeat函数

浏览器变窄,"auto"列继续变窄,直到达到min-content阈值。 image.png 在上面的演示,只有当每一列达到min-content阈值,div 才会开始溢出容器。...屏幕浏览器上,五列的间距均为 1fr。较窄的设备上,列会越来越窄。一旦达到 60px 8vw 之间的较低值,就会停止缩小。...,那些无法显示的 div 会被放到下一。...auto-fitauto-fill的区别 我们目前看到的示例,auto-fitauto-fill似乎没有任何区别。区别只出现在某些情况下,我们现在就来简单介绍一下。...在上图中,你可以看到末端列的编号仍然是 8,而 8 则堆叠在网格 7、6 5 的上方。 那么我们该如何看待这一切呢?

52230

5分钟学习css网格

直到你理解了基础知识之后,我才会把你不应该关心的一切都抛脑后 你的第一个网格布局 CSS Grid的两个核心成分是包装(父)物品(子)。...列 为了使它成为二维的,我们需要定义列。我们创建三列。...如果我们还有三个,那么最下面的一也会被填充 要定位调整项目的大小,我们将定位它们并使用网格网格的属性 .item1{ grid-column-start:1;...以下是屏幕上显示的内容 ? 当你们为什么只有3列的时候,我们有4条专栏?看看这个图片,我画了黑色的列线 ? 请注意,我们现在正在使用网格的所有。...当我们把第一个项目占据整个第一,它将其余的项目向下推 最后,我想展示一个更简单的方法来编写上面的语法 .item1{ <!

1.7K20

响应式web设计 转

逐行 interlace 隔行   grid 检测输出设备是网格设备还是位图设备   上述除了scangrid之外都可以使用minmax来创建一个查询范围  为ie8及更低版本加入媒体查询的工具...高一般相对与元素本身的文字大小,而不是父元素的文字大小。  em作为一种测量单位,指的是特定字母的宽度高度相对于特定字体磅值的比例。 ...,alpha,omega(分别表示一的第一个最后一个元素),col_x   4 响应式设计的Html5   腻子脚本(polyfill) 具体指一段能给老版本浏览器带来新特性的Javascript...list属性及其对应的datalist元素可以让用户输入框开始输入时,显示一组备选项。   datalist标签中使用select包裹的option,方便为老浏览器提供降级方案。 ...html5的新输入类型   不引入额外js的前提下,限制用户输入的数据。   不支持这些新特性的浏览器,会被降级显示为一个标准的文本输入框。

3.6K10

CSS进阶12-网格布局 Grid Layout

适应可用空间的布局通常很脆弱,并且空间受到限制导致反直觉行为。作为替代方案,许多Web应用程序的作者选择固定布局,无法利用屏幕上可用渲染空间的更改。 网格布局的能力解决了这些问题。...它为作者提供了一种机制,使用一组可预测的大小调整行为将可用空间分配给列。然后,作者可以将其应用程序的构造块元素精确定位设置到由这些列的交叉点定义的网格区域grid area。...游戏标题游戏板的顶部应始终对齐。 游戏达到最小高度,游戏板的底部统计区域的底部对齐。在所有其他情况下,游戏板将会扩展以充分利用所有可用的空间。 *控件集中游戏板下。...此外,纵向或横向观看,游戏应该优化组件的放置(Figuer67)。...每个网格轨道可以设置一个大小,用来控制宽度或高度或者可能会增长。 网格单元是网格网格列的交集。它是定位网格可以引用的网格的最小单元。 接下来的例定义了一个三两列的网格

6K20

每天10个前端小知识 【Day 17】

Relative 相对定位方式,相对于其父级元素(无论父级元素此时为何种定位方式)进行定位,准确地说是相对于其父级元素所剩余的未被占用的空间进行定位(父元素由多个相对定位的子元素可以看出),且会占用该元素文档初始的页面空间...注意:元素设置为绝对定位没有指定top,bottom,left,right的值,他们的值并不是0,这几个值是有默认值的,默认值就是该元素设置为绝对定位前所处的正常文档流的位置。...等,按百分比设定它们,依据的也是父容器的宽度,而不是高度。...grid-auto-columns 属性 grid-auto-rows 属性 有时候,一些项目的指定位置,现有网格的外部,就会产生显示网格隐式网格 比如网格只有3列,但是某一个项目指定在第5...所以我们在编写选择器的时候,可以遵循以下规则: 不要嵌套使用过多复杂选择器,最好不要三层以上 使用id选择器就没必要再进行嵌套 通配符属性选择器效率最低,避免使用 减少使用昂贵的属性 页面发生重绘的时候

13211

Bootstrap 4 发布了,可是已经过气了呀

然而今天的 Web 世界已经当初 Mark Otto 发布 Bootstrap 的情况大为不同,一些开发者由此质疑它的更新是否还有意义。...V4 版本的主要更新有: 改进的网格系统(默认情况下为 Flexbox) 现在使用 Sass(取代了 Less) 不支持 IE8、IE9 iOS 6 重写 JavaScript 插件 现在使用 rem...这一系统为网页提供了一种可声明的方式来渲染网格系统的内容,不需要额外的步骤就能使流式内容兼容桌面端移动端。 Bootstrap 4 的网格系统使用的是几乎所有的现代浏览器都支持的 flexbox。...Bootstrap 最初于 2011 年发布,当初是作为 Twitter 的一个产品诞生的,号称是“世界上最流行的 HTML、CSS JS 库”,但其增长趋势如今似乎已经到头了。...库的帮助下,现代 Web 应用程序体系结构已经采用了松耦合,高内聚的组件,这些组件通常将 HTML,CSS JavaScript 放在同一个文件

4K80

Android开发笔记(二十二)瀑布流网格WaterfallGridView

瀑布流网格的产生背景 Android展示门类信息一般使用列表视图ListView或者网格视图GridView,特别是电商类APP的首页,除了顶部导航、底部标签、上方横幅外,主要页面都是展示各种商品活动的网格视图...可惜GridView不支持自适配网格高度,所以我们得自己写个瀑布流网格控件来实现这样的效果了。...前面我们自定义视图章节,已经提到尺寸测量以及视图绘制的相关知识,之所以onLayout而不是onDrawdispatchDraw中排列视图,是因为onDrawdispatchDraw都通过画布来绘制...为此我们需要重写dispatchTouchEvent方法,在按下事件时计算当前按下区域位于哪个控件,具体算法就是获取该控件屏幕上的位置getLocationOnScreen,然后根据宽和高得到该触摸点的归属控件...接着弹起事件判断要如何处理弹起事件,单击长按可以通过按下的时间长短来区分,网格位置的position,可以用当前控件的编号id减去第一个视图的临时id,它们的差便是当前网格的序号。

2.3K60

分享一些关于 CSS Grid 基础入门知识

网格系统(CSS Grid)是CSS中最重要的特性之一。它能够以简单的方式将元素对齐到列。CSS网格使得设计复杂且响应式的网页变得更加容易,无需使用浮动、表格或定位。...屏幕宽度达到最小尺寸,你将只有1列宽度为1fr。如果屏幕宽度太大,你将拥有许多宽度为200px的列。...网格模板(grid-template-rows) 属性grid-template-rows用于定义网格容器的行数。...它与grid-template-columns类似,唯一的区别是现在我们是处理而不是列。 假设我们想要定义一个具有两列网格容器。...它们之间没有区别,只是我们是处理而不是列。 网格间隔属性(grid-gap) 网格间隔属性grid-gap用于父元素内设置列之间的间隔。

18130

Jump Start Bootstrap 第2章

网格系统允许我们适当地为我们的网站内容提供服务;它将屏幕分成多个列,这些列可以用来创建各种类型的布局。一旦定义了列,我们就可以决定将哪个HTML元素放置何处。...Bootstrap网格系统将屏幕划分为每行12列;列的宽度根据屏幕的大小而变化。因此,网格系统是响应式的,浏览器窗口的大小发生变化时,这些列会动态地调整自身大小。...我希望您在理解引导程序的网格系统发现这个案例研究很有用。 嵌套列 你可以布局任意列创建一套新的12格Bootstrap网格。...这里我调用了styless.css的样式col3col4,用于提供背景颜色。 ? 创建复杂的布局,可以方便地嵌套列。您还可以进一步嵌套最内部的,并在其中生成一组新的列。...诸如嵌套、偏移重新排序的功能,也让网格系统变的更强大。

2.9K40
领券