如何解决在Safari / Webkit中设置“详细信息/摘要”标记的样式时出错
使用<details>
标记时,我想在<summary>
元素的右侧显示软三角。
因此,而不是默认值:
▶ My Cool List
(左对齐)
我想这样做:
My Cool list ▶
(右对齐)
在Chrome中它可以正常工作
This question帮助我编写了可在Chrome和Firefox上运行的CSS:
// Right-align all summaries.
details > summary {
list-style: none; // Remove the default arrow.
display: flex;
align-items: center; // Vertically center the arrow.
}
details > summary::-webkit-details-marker {
display: none;
}
details > summary::after {
content: '▶';
}
details[open] > summary::after {
content: "▼";
}
但是,在Safari上(经过Mojave在桌面+ iOS14 + iOS12上测试的)上,软三角被推到了新的一行:
My Cool List
▶
在Safari中:
那么,如何使Safari在同一行上显示Firefox和Chrome等软盘三角形?看来此问题是由于display: flex
与::after
伪元素的结合使用引起的,但是我对前端开发了解不多,所以我无所适从。 >
解决方法
您可以添加特定于浏览器的 CSS 来解决 display: flex;
的 <summary>
问题。
对于 CSS
@media not all and (min-resolution:.001dpcm) { @media {
details > summary {
display: block;
}
}}
对于 SCSS
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
details > summary {
display: block;
}
}}
,
事实证明Safari无法处理<p>
中的<summary>
标签;当我删除这些标签时,甚至不需要使用flex来使伪元素右对齐。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。