“设置”是什么意思；开放式；关于<；细节>；用CSS术语来说，标签实际上是做什么的？

为了便于访问，我正在升级我的站点以使用

标记

我的问题是。在

标记上设置“打开”属性时，如下所示：

<details open>  
    <summary>more info</summary>  
    <ul>        
        <li>blah</li>        
    </ul>
</details>

更多信息

废话

标签的CSS术语有什么不同吗？它似乎有

display:block

设置它是否可见

我正在尝试编写前端测试，以检查单击元素时

是否可见，我不确定如何在CSS中没有实际不同的内容的情况下执行此操作

---

jshiddle here:

设置

元素的

打开属性决定内容的高度是自然高度还是零。如果存在
open
，则高度将为内容的正常高度；如果属性不存在，或内容切换为关闭，则高度为零。在Chrome中有一个快速的
，当
详细信息
关闭时，
ul
的
高度
和
宽度
属性的计算值更改为
自动
。当你点击
详细信息时，这里有一个警告
ul
的高度，关于如何检测可见性，Mathijs Flietstra的回答似乎符合要求

关于CSS实际上在做什么这一更广泛的问题，HTML5规范在这里有话要说：

它说：

。。。[details]元素应呈现为“块”框，对于从左到右的元素，其“padding left”属性设置为“40px”（特定于LTR），对于从右到左的元素，其“padding right”属性设置为“40px”。元素的阴影树将获取元素的第一个子摘要元素（如果有），并将其放置在第一个“块”框容器中，然后获取元素的剩余子体（如果有），并将其放置在第二个“块”框容器中

第一个容器应包含至少一个行框，该行框应包含一个公开小部件（通常为三角形），水平放置在details元素的左填充内。该小部件将允许用户请求显示或隐藏详细信息

第二个容器的“溢出”属性应设置为“隐藏”。当details元素没有open属性时，第二个容器将从渲染中删除

换句话说，除了summary元素之外的details元素的内容被放入一个匿名块框中。（这有点类似于如果你让一个元素
显示：table cell
，那么它将被包装在表行、表行组和表的匿名框中。）正是这个匿名框（以及它的内容）被隐藏或显示，这就是为什么你看不到你选择的任何元素的CSS指定值发生变化，只有计算出的值

不过还是要提醒一下。我们还没有很多细节元素的实现，上面的规范文本也不要求浏览器这样做，它只说“预期”，所以其他浏览器可能会选择通过其他方式来实现效果。我们只能等待了解。
我还不会使用这个元素，因为它似乎只在Chrome和Safari中受支持。出于可访问性的原因，我想这样做。我正在使用一个垫片来支持较旧的浏览器：