a:hover{background-color:#ffeb3b}换行后只高亮首行，因a是inline元素，背景按行框渲染且不连贯；应改用linear-gradient+background-attachment:local实现每行底部连续高亮，并设padding-bottom和no-repeat。
直接用 a:hover 改 background-color 会出问题：文字换行时背景断层、内联元素不占块级空间、移动端无效。得配合 display、background 渐变和媒体查询一起调。
为什么 a:hover { background-color: #ffeb3b; } 换行后只高亮首行？
a 默认是 inline 元素，它的背景色只包裹每行文字的“行框”（line box），但浏览器不会自动把多行背景连成一片。你看到的“断层”，其实是正常渲染行为，不是 bug。
- 别强行加
display: block——它会让链接独占一行，破坏原有排版流 - 更稳妥的做法是用
background渐变 +background-attachment: local，让每一行都独立绘制底部高亮条 - 必须显式写
padding-bottom（比如3px），否则高亮条会紧贴文字基线，视觉上像没对齐
怎么写才能让多行链接背景连续高亮？
用 linear-gradient 替代纯色背景，靠浏览器逐行渲染机制实现天然连贯：
code>a {
text-decoration: none;
word-break: break-word;
padding-bottom: 3px;
background: linear-gradient(to right, #ffeb3b, #ffeb3b) left bottom / 100% 6px no-repeat;
background-attachment: local;
}
-
left bottom确保高亮条从每行左端、文字底部起始 -
100% 6px表示宽度铺满整行、高度固定 6px，不随字体大小缩放 -
background-attachment: local是关键——它让背景随文字滚动，而不是随容器，避免滚动时高亮错位 - 别漏掉
no-repeat，否则渐变会平铺成条纹
移动端点击没反应或 hover 只闪一下？
iOS Safari 和多数安卓浏览器里，:hover 在真机触摸下基本不可靠：要么不触发，要么只在首次模拟鼠标时生效，后续就失效。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 不能把核心交互（比如跳转提示、菜单展开）绑在
:hover上 - 用
@media (hover: hover) and (pointer: fine)包一层，只对鼠标/触控板设备启用 hover 样式 - 触摸设备上，改用
touchstart+touchend切换临时 class，比如a.is-touched，再用该 class 控制背景 - 记得加
cursor: pointer，不然用户根本看不出这是可点区域
加了 transition 却还是跳变？
背景色过渡卡顿，往往不是 transition 写错了，而是初始状态没定义清楚。
- 如果默认没设
background-color或设为transparent，:hover时浏览器会从“未定义”开始过渡，行为不可控 - 统一写成：
a { background-color: transparent; transition: background-color 0.2s ease; } - 别用
transition: all 0.2s——万一之后加了border或padding，就会引发布局重排，造成行高跳动 - 表格中链接若嵌在
td里，还要检查td是否有!important覆盖了a的背景
真正难调的不是颜色本身，而是 display 类型、background 渲染粒度、以及是否忘了给触摸设备留退路——这三处松动，再准的 hex 值也救不回体验。
