TV浏览器禁用:hover，需用:focus-visible模拟焦点；单位优先vh/vw；scroll-snap需配合smooth；高分屏用box-shadow+scale替代1px边框。
TV浏览器不支持hover伪类，但遥控器焦点需要视觉反馈
电视端浏览器（如WebOS、Tizen、Android TV内置WebView）大多禁用或弱化:hover，焦点切换依赖:focus和:focus-visible。直接写button:hover { background: red }在TV上基本无效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有可交互元素（
button、a、带tabindex的div）必须显式声明outline: none，再用border或box-shadow模拟焦点框——否则部分系统会叠加默认难看的虚线框 - 优先用
:focus-visible而非:focus，避免鼠标点击时意外触发焦点样式（Chrome/Firefox已支持，Safari需加outline: auto降级） - 焦点高亮色块建议最小尺寸≥24px，电视观看距离远，小变化看不见
rem单位在TV上缩放失准，改用vh/vw更可靠
TV浏览器对根字体大小（html { font-size }）的继承和计算常有偏差，尤其在系统级缩放开启时，rem布局容易错位或过小。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 按钮、卡片、间距统一用
vh（视口高度单位），例如padding: 2vh 4vw，能随屏幕物理尺寸线性缩放 - 文字大小仍可用
rem，但需配合@media强制重设根字号：@media (min-width: 1920px) { html { font-size: 20px; } } - 避免
em嵌套，TV端CSS引擎对层级计算容错低，易导致尺寸坍缩
遥控器方向键导航卡顿，scroll-snap-type必须配合scroll-behavior: smooth
TV端方向键滚动常出现跳帧、停不住、越过目标项，根本原因是默认滚动行为是“瞬移式”，没给焦点迁移留出视觉缓冲时间。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 横向滚动容器必须同时设置：
scroll-snap-type: x mandatory+scroll-behavior: smooth，否则scroll-snap在多数TV浏览器中不生效 - 每个可聚焦子项加
scroll-snap-align: center，且确保其宽度为视口整数倍（如width: 100vw），避免吸附偏移 - 禁用
touch-action: pan-x——TV遥控器不是触摸设备，加了反而干扰键盘事件流
4K/8K分辨率下1px边框发虚，用transform: scale(0.5)做物理像素对齐
高分屏TV渲染时，CSS像素和物理像素比（devicePixelRatio）常为2或3，1px被模糊拉伸，焦点框、分割线看起来毛边、不锐利。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 关键边框不用
border: 1px solid #ccc，改用box-shadow: 0 0 0 0.5px #ccc，再配transform: scale(2)反向放大（适配2x屏） - 更稳妥方案：用
@supports (-webkit-appearance: none)检测，对高DPR设备注入border-image切片资源 - 禁止使用
background-image: linear-gradient()模拟细线——TV GPU解码能力弱，动画掉帧明显
TV端CSS最麻烦的不是写法多，而是同一行代码在不同厂商系统里表现不一致。建议把user-select: none、-webkit-tap-highlight-color: transparent这类兼容性补丁写进全局重置，别等出问题再加。
