【问题标题】:HTML table browser render issuesHTML 表格浏览器呈现问题
【发布时间】:2019-10-22 03:28:27
【问题描述】:

一个。考虑这个标记:

<table><th></th></table>

当我检查我得到的页面时:

<body><table><tbody><tr><th></th></tr></tbody></table>

b.考虑这个标记:

<table><span role="columnheader"></span></table>

当我检查我得到的页面时:

<body><span role="columnheader"></span><table></table>
  • 在 chrome、ff 和 explorer (11) 上测试。

怎么可能?

我在尝试测试parentNode 时遇到了这种情况,但在两种情况下都没有按预期得到“表格”。

有人可以为这种行为遮遮掩掩吗?

【问题讨论】:

    标签: html html-table


    【解决方案1】:

    两组 HTML 均无效,浏览器正在执行错误恢复。表元素内 span 的恢复规则(或者更确切地说,general parser rules)与表元素内 th 的恢复规则不同。

    (为了过于简单,第一个元素必须在表格内的 tbody/tfoot/thead 内的 tr 内……因此添加了缺少的元素,但跨度根本不必在表格内扔掉)。

    您应该从一开始就编写有效的 HTML。

    【讨论】:

    • 感谢您的链接。我会深入研究它。这是否意味着 aria-role 不应该与语义元素变得复杂 - 所以如果 table 是父元素,我不能使用其他元素(即 span 或 div - 即使我指定了匹配的角色)?
    • A &lt;span&gt; 可以是 &lt;th&gt;&lt;td&gt;&lt;caption&gt; 的子代,而不是 &lt;table&gt;&lt;thead&gt;&lt;tbody&gt;&lt;tfoot&gt;、@98765433 、&lt;col&gt;&lt;tr&gt; - 无论您的 aria 属性如何。
    • 是的,aria-role 不会更改 HTML 的解析规则 (
    • 感谢您的回答和cmets。根据downvotes,我想这是任何开发人员都应该知道的基本知识......然后我再次编写测试函数以在不同的页面上运行以检查它是否正确呈现,而这个表格主题让我花了几个小时的生命...(:
    猜你喜欢
    • 1970-01-01
    • 2010-10-28
    • 2013-09-14
    • 2015-10-03
    • 1970-01-01
    • 1970-01-01
    • 2021-12-03
    • 1970-01-01
    • 2017-01-29
    相关资源
    最近更新 更多