旧版浏览器中selected属性会导致多选下拉框“变形”，因其将selected误解析为单选锚点，强制置顶并忽略size高度，使控件回退为单行渲染；应禁用html中selected，改用js动态设置选中状态。
为什么 selected 属性会让多选下拉框在旧版内核里“变形”
因为旧版浏览器（如 IE10–IE11、部分国产双内核浏览器的兼容模式）对 selected 的解析逻辑和现代标准不一致，尤其当它与 multiple + size 同时存在时，会触发渲染引擎的歧义处理：它可能把 selected 当作“单选默认项”强制置顶，进而忽略 size 指定的高度，回退到单行渲染，导致整个多选区域被压缩成一行、滚动条消失、选项不可见。
selected 和 multiple 共存时的 DOM 行为差异
现代浏览器中，selected 仅标记初始选中状态，不影响布局；但在旧内核中，它可能被当作“焦点锚点”，强制将对应 <option></option> 滚动到可视区顶部，从而破坏 size 定义的固定行数。更麻烦的是，如果多个 <option></option> 都带 selected，某些旧内核会只保留第一个生效，其余被静默丢弃——表面上看是“多选失效”，实则是样式+数据双重错乱。
- 不要在
<select multiple></select>中给任意<option></option>设置selected属性（哪怕只是“默认全选”场景） - 初始选中必须通过 JS 动态设置：
option.selected = true或批量操作selectElement.selectedOptions - 若需服务端回填，确保 HTML 输出时完全省略
selected属性，改由前端 JS 根据返回数组遍历匹配并设.selected
旧内核下 size 值被忽略的典型表现与绕过方式
即使写了 size="5"，旧内核仍可能渲染成单行高，并附带一个无法拖动的假滚动条。这不是 CSS 能修好的，而是 layout 计算阶段就失败了。根本原因是：旧内核把含 selected 的 <select multiple></select> 当作“伪单选控件”处理，直接跳过 size 布局逻辑。
- 验证方式：用开发者工具检查 computed height，若显示为
auto或远小于预期（如 22px），基本可判定被降级 - 强制 height 不起作用，但可以加
display: inline-block+ 显式height（例如height: 120px），再配合overflow-y: auto模拟多行容器 - 更稳妥的做法是放弃原生
<select multiple></select>，改用轻量级 JS 下拉组件（如 Choices.js），它不依赖size，且对旧内核有 fallback 处理
移动端和旧桌面端混合场景下的隐藏风险
很多“旧版内核”问题其实来自桌面端的 WebView 容器（比如 Electron 1.8.x、微信内置 X5 内核 6.6.x），它们既不完全等同于 IE，也不遵循 Chrome 规则。这类环境对 selected 的处理更随意——有时会触发两次重绘，导致下拉框闪动、尺寸抖动，甚至卡死主线程。
真正容易被忽略的点是：你可能只在 PC 端测了 IE11，却没意识到企业微信、钉钉、某些政企 OA 的桌面客户端用的是更老的内核版本，而它们对 selected 的解析比 IE11 还脆弱。一旦用户在这些环境里打开含 selected 的多选下拉，第一反应不是“选不了”，而是“页面卡了”。
