本文旨在解决在移动端浏览器中，HTML <details> 元素的 <summary> 子元素在点击展开时出现的背景色短暂闪烁问题。通过分析问题原因，并提供一种基于CSS cursor 属性的解决方案，帮助开发者优化用户体验，避免不必要的视觉干扰。该方案通过媒体查询区分移动端和桌面端，兼顾了不同设备的交互需求。
在移动端开发中，我们经常会遇到一些看似难以理解的渲染问题。其中一个典型例子是，当使用 HTML5 的 <details> 和 <summary> 元素创建可折叠内容时，在移动设备上点击 <summary> 展开 <details> 时，<summary> 的背景色会短暂闪烁，这会影响用户体验。这种现象在 iOS 和 Android 设备上都可能出现。
问题分析
这种背景色闪烁并非由开发者定义的 CSS 样式直接引起，而是浏览器在处理触摸事件时的一种默认行为。当用户触摸 <summary> 元素时，浏览器可能会短暂地应用一个默认的高亮或选中状态，导致背景色发生变化。即使你尝试使用 :focus, :hover, :active 等伪类来覆盖背景色，也可能无法完全消除这种闪烁，因为这种默认行为的优先级更高。
立即学习“前端免费学习笔记（深入）”；
解决方案：重置 cursor 属性
一个出人意料但有效的解决方案是重置 <summary> 元素的 cursor 属性。通过将 cursor 设置为 unset，可以阻止浏览器应用默认的触摸高亮效果，从而消除背景色闪烁。
以下是具体的 CSS 代码实现：
/* 用于移动端 */
summary {
cursor: unset;
}
/* 用于桌面端，保留手型光标 */
@media screen and (min-width: 817px) {
summary {
cursor: pointer;
}
}代码解释：
- summary { cursor: unset; }: 这条规则针对所有 <summary> 元素，将其 cursor 属性设置为 unset。unset 关键字会将属性重置为其继承值（如果存在）或其初始值（如果不存在）。在本例中，它有效地移除了浏览器默认的光标样式，从而阻止了背景色闪烁。
- @media screen and (min-width: 817px) { ... }: 这是一个媒体查询，用于针对屏幕宽度大于或等于 817 像素的设备应用特定的 CSS 规则。这是为了在桌面端保留 <summary> 元素的手型光标（cursor: pointer），以提供更好的交互体验。你可以根据你的项目需求调整这个断点值。
完整示例代码：
<!DOCTYPE html>
<html>
<head>
<title>details/summary 背景色闪烁问题解决</title>
<style>
details {
width: 50%;
margin: 0 auto;
background: #FDF4E3;
margin-bottom: .5rem;
border-radius: 5px;
color: black;
outline: none;
}
summary {
padding: 1rem;
display: block;
padding-left: 2.2rem;
position: relative;
cursor: pointer; /* 默认手型光标 */
}
details[open] summary {
background: #F9D478;
}
details:focus,
details:hover,
details:active {
background: #FDF4E3;
}
summary:focus,
summary:hover,
summary:active {
background: none;
}
summary {
cursor: unset; /* 移除移动端点击时的背景色闪烁 */
}
/* 桌面端保留手型光标 */
@media screen and (min-width: 817px) {
summary {
cursor: pointer;
}
}
details p {
padding: 1rem;
}
</style>
</head>
<body>
<details>
<summary>Summary</summary>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque porro odit nulla quis voluptas quod similique sunt, nostrum, ea maxime repellendus quisquam harum tempore illum sed, dolore qui aperiam impedit!
</p>
</details>
</body>
</html>注意事项：
- 断点值调整： 根据你的网站或应用的布局和设计，调整媒体查询中的 min-width 值。
- 测试： 在不同的移动设备和浏览器上进行测试，以确保解决方案的有效性。
- 其他解决方案： 虽然重置 cursor 属性是一种简单有效的解决方案，但在某些情况下，可能需要尝试其他方法，例如使用 JavaScript 监听触摸事件并阻止默认行为。
总结
通过重置 <summary> 元素的 cursor 属性，我们可以有效地解决在移动端点击 <details> 展开时出现的背景色闪烁问题。这种方法简单易用，且不会对桌面端的交互体验产生负面影响。在开发移动端 Web 应用时，关注这些细节问题，可以显著提升用户体验，让你的应用更加专业和精致。
