必须显式声明border三要素并适配dpr：用border: 1px solid #333替代简写，高DPI屏用@media(-webkit-min-device-pixel-ratio:2){.line{border-width:.5px}}或伪元素scale(0.5)，table需加border-collapse:collapse，避免outline。
border-style: solid 在不同浏览器渲染差异怎么处理
html5 本身不定义边框样式，实线边框靠 css 的 border-style: solid 实现，但老版本 safari、IE11 或某些 android webview 对 border 缩写解析不一致，尤其在 border: 1px solid #000 中省略单位或颜色时容易失效或回退为默认灰色。
- 必须显式声明三要素：宽度、样式、颜色，例如
border: 1px solid #333，不能只写border: solid或border: 1px - 避免使用
border: initial或border: unset，它们在 IE 和部分旧版 chrome 下不生效 - 若需兼容 ios 12 及更早系统，建议用分开写法：
border-width: 1px; border-style: solid; border-color: #333，减少解析歧义
移动端高清屏（dpr > 1）下 1px 边框变粗怎么办
在 iphone 或高 DPI 安卓设备上，CSS 的 1px 实际渲染为 2 物理像素，导致“实线”看起来比预期粗、发虚。这不是 html5 问题，而是 CSS 像素与设备像素比（dpr）错配所致。
- 用
transform: scaleY(0.5)配合transform-origin: top压缩单侧边框（仅适用于底部/顶部边框） - 更稳妥的做法是媒体查询 + dpr 检测：
@media (-webkit-min-device-pixel-ratio: 2) { .line { border-width: 0.5px; } }，但注意 firefox 不支持0.5px，需 fallback - 实际项目中推荐使用伪元素 +
transform: scale(0.5)方案，兼容性好且可控性强
border-collapse: collapse 对 table 实线边框的干扰
表格内设置 border: 1px solid #ccc 后，发现边框重复叠加、变粗或出现缝隙——大概率是没处理 table 的边框合并逻辑。
- 给
table加border-collapse: collapse，否则单元格边框独立绘制，相邻边框会重叠成 2px - 若需保留间距，改用
border-spacing: 0并确保父容器无 padding 干扰 - 注意
border-collapse在 Firefox 中对border-radius有抑制作用，圆角需加在table上而非td
用 outline 替代 border 实现“伪实线”要小心什么
有人为绕过 border 渲染问题，改用 outline: 1px solid #000，但它不是盒模型一部分，不占布局空间，且无法单独控制某一边。
立即学习“前端免费学习笔记（深入）”；
-
outline不支持border-radius、border-image，也不能像border那样设置border-top等单边属性 - 键盘聚焦时浏览器默认添加
outline，若覆盖了自定义 outline，可能影响可访问性（a11y） - 真正需要“视觉实线但不占位”时，优先考虑
box-shadow: 0 0 0 1px #000，它更可控、可圆角、无聚焦副作用
跨环境统一的关键不在 HTML5 标签，而在 CSS 边框声明的完备性与设备像素适配意识。最容易被忽略的是：不验证 dpr 下的物理渲染效果，仅靠桌面 Chrome 调试就上线 —— 这会让“实线”在真机上变成模糊的 2px 带。