dialog必须是body的直接子元素，否则safari和部分chrome版本不渲染backdrop；必须用showmodal()触发模态行为；点击遮罩关闭需手动监听click并判断e.target === dialog。
dialog必须是直接子元素，否则遮罩层不渲染
这不是样式没写对，而是 Safari（v17.6）和部分 Chrome 版本的硬性解析规则：dialog 只有作为 body 的直接子节点时，才会生成并渲染 dialog::backdrop。嵌套在 <div id="app"> 或 Vue/React 根容器里，遮罩直接消失，点空白处无响应、Esc 也无效。
<p>实操建议：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>把所有 <code><dialog></dialog> 标签写在 前、
