ie8/ie9兼容模式下细边框异常是因border-collapse: collapse未被正确应用，必须table、th、td三者同时声明相同border且collapse写在table上，缺一即断线。
直接写 border: 1px solid #000 却看到粗边框？不是 CSS 写错了，而是浏览器默认用 border-collapse: separate，table、th、td 各画各的 1px 边框，相邻一挤就变成视觉上 2px —— 兼容模式下这个问题更顽固。
为什么 IE8/IE9 兼容模式下细边框特别难搞
老版本 IE（尤其是文档模式为 IE8 或 IE9 的兼容模式）对 border-collapse 的解析更严格：它要求 table、th、td 三者必须同时声明相同宽度和颜色的 border，缺一不可；否则会回退到 separate 行为，出现双线或断线。
-
border-collapse: collapse必须写在table上，不能只写在td或用后代选择器间接生效 - 不能只给
table设边框而漏掉th和td—— 那样只有外框，内部全是空白缝 - IE 兼容模式下，
border-spacing: 0完全无效，别白费力气 - 避免使用 RGBA 或半透明色，IE8 不支持，会降级成黑色或透明，导致边框“消失”
兼容写法：table + th + td 必须三者同设 border
最稳妥的写法是用逗号分隔选择器，一次性统一设置，确保三者属性完全一致：
table, th, td {
border: 1px solid #ccc;
border-collapse: collapse;
}
注意：border-collapse: collapse 只需声明一次，但必须出现在这个规则块里（不能拆到别的样式里），否则 IE 兼容模式可能忽略。
- 颜色推荐用十六进制（如
#ccc），不用rgb()或命名色（如gray），IE8 对后者支持不稳定 - 不要用
!important覆盖第三方框架样式——Bootstrap 等常重置border-collapse，得用更高优先级选择器（如table.my-table, table.my-table th, table.my-table td）覆盖 - 如果表格嵌套，外层
table也要单独处理，内层不会继承外层的border-collapse
遇到边框断开或错位，先查这三项
细边框在兼容模式下突然“断掉”，大概率不是代码漏了，而是被隐性规则干扰：
- 检查是否有
th或td被 JS 动态加了style="border: none"—— 这会直接破坏 collapse 合并逻辑 - 确认没有父容器设置了
overflow: hidden且表格内容溢出，IE 下可能裁剪掉部分边框像素 - 留意是否用了
colgroup/col并设置了border—— IE 兼容模式下col的边框不参与 collapse，反而会叠加出额外线
真正起作用的从来不是“加边框”，而是让浏览器把所有边框“焊”成一条线。兼容模式下，少一个 th 的 border，就等于少了一颗焊点 —— 整条线就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
