原生alert()宽高不可控，因其为操作系统级模态框，脱离DOM、不响应CSS/JS；替代方案是使用元素（现代浏览器）或自定义div+遮罩（兼容旧环境）。
HTML 原生 alert() 无法控制宽高，任何试图用 CSS 或 JS 修改它的尺寸、样式或布局的行为都无效——这是浏览器强制限制，不是你代码写错了。
为什么 alert() 宽高不能自适应
所有主流浏览器（Chrome、Firefox、Safari、Edge）都将 alert() 实现为操作系统级模态对话框，其渲染完全脱离 DOM 流程，不响应 CSS、不暴露 DOM 节点、不支持事件监听。你写的 style 或 document.querySelector('alert') 全部无意义。
- 调用
alert('长文本')时，宽度由内容字符数和字体默认度决定，浏览器内部硬编码换行逻辑，无法干预 - 高度随行数增加而增加，但行高、内边距、按钮尺寸均由系统主题控制，JS 无法读取或修改
- 在高 DPI 屏幕或缩放页面（
transform: scale()）下，alert()尺寸可能异常，但依旧不可控
替代方案：用 dialog 元素实现真正可自适应的警告框
现代浏览器（Chrome 98+、Firefox 99+、Safari 15.4+）已原生支持 ，它可被 CSS 控制、可动态插入内容、可绑定事件，是 alert() 的合理替代。
- 必须用
showModal()触发，否则不居中、无遮罩、无焦点锁定 - 宽度推荐用
max-width: 90vw防止窄屏溢出，高度用max-height: 80vh+overflow-y: auto应对长内容 - 避免设固定
width/height，改用min-width和min-height保底，让内容撑开更自然 - 关闭按钮需显式绑定
close()，不能依赖Esc键（部分旧 Safari 不触发）
<dialog id="my-alert"><p>这是一条可自适应的警告信息，支持任意长度文本和换行</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="overflowclass">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p class="overflowclass">使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<button onclick="this.closest('dialog').close()">确定</button>
</dialog><script>
const dialog = document.getElementById('my-alert');
dialog.showModal(); // 必须用这个方法
</script>
兼容性兜底：需要支持 IE 或老版本 Chrome/Firefox 怎么办
若项目仍需兼容 dialog 不可用的环境（如 IE11、Chrome ≤97），只能用 div 模拟，但必须注意三个关键点：
- 遮罩层要用
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999，且background-color: rgba(0,0,0,0.5)，不能用opacity避免子元素继承 - 弹窗本身要加
transform: translate(-50%, -50%)居中，并设min-width: 280px防小屏挤压文字 - 必须手动禁用背景滚动：
document.body.style.overflow = 'hidden'，关闭时恢复，否则 iOS Safari 会卡死
真正难的不是做出一个“看起来像 alert”的弹窗，而是让它的交互行为（焦点管理、Esc 关闭、Tab 键循环、屏幕阅读器支持）和原生 alert 一致——这些细节在测试阶段最容易漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
