如何修复链接前置图标右键点击时的错位问题？

问题根源 #

你当前用float实现图标与文本的排列，浏览器右键选中文本时，浮动的伪元素会因文本选中状态触发重排，导致位置偏移。改用Flex布局可从根本上避免该问题，同时保留图标作为链接一部分的特性。

修改后的CSS代码 #

#block-useraccountmenu a {
    display: inline-flex; /* 保持行内元素特性，同时启用flex布局 */
    align-items: center; /* 让图标与文本垂直居中对齐 */
    gap: 6px; /* 控制图标与文本的间距，替代margin更简洁 */
}

#block-useraccountmenu a::before {
    content: "";
    background: url("/themes/subtheme_olivero/images/person-circle.svg?itok=5") no-repeat;
    width: 28px;
    height: 28px;
    /* 移除float属性，flex布局已能控制元素排列 */
}

方案优势 #

1. 布局稳定性：inline-flex让链接维持行内元素特性的同时，内部通过flex规则排列伪元素和文本，不会因文本选中状态触发重排错位。
2. 对齐更精准：align-items: center确保图标与文本在垂直方向上居中对齐，比float的垂直对齐逻辑更可靠。
3. 间距控制清晰：gap属性直接控制flex项间的间距，无需依赖margin，避免浮动带来的边距计算问题。
4. 图标仍属链接：伪元素是<a>标签的子元素，点击图标会正常触发链接跳转，符合需求。

兼容旧浏览器的备选方案 #

若需兼容不支持gap属性的旧浏览器，可将gap替换为伪元素的margin-right：

#block-useraccountmenu a {
    display: inline-flex;
    align-items: center;
}

#block-useraccountmenu a::before {
    content: "";
    background: url("/themes/subtheme_olivero/images/person-circle.svg?itok=5") no-repeat;
    width: 28px;
    height: 28px;
    margin-right: 6px;
}

内容的提问来源于stack exchange，提问作者user20416497