Bootstrap 5汉堡菜单线条在不同设备厚度不一致求解决

这种问题通常是高DPI移动设备的亚像素渲染差异导致的，以下是几种不替换图片、保留动画效果的可行解决办法：

方法1：用Border替代Height实现线条（最推荐） #

将原本通过height设置的线条改为border，浏览器对border的渲染在不同DPI设备上更稳定，避免亚像素缩放导致的高度偏差：

.btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after {
    display: block;
    width: 22px;
    /* 用border-top替代height实现线条 */
    border-top: 2px solid var(--light);
    margin: 4px auto !important; /* 调整margin抵消border的高度占用 */
    content: '';
    border-radius: 4px;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    /* 清除原有样式干扰 */
    height: auto !important;
    background-color: transparent !important;
}

该方案完全保留原动画逻辑，同时从根源上解决渲染不一致问题。

方法2：开启硬件加速优化渲染 #

通过强制GPU渲染减少浏览器软件渲染带来的差异，适用于不想修改线条实现方式的场景：

.btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after {
    display: block;
    width: 22px;
    height: 2px !important;
    margin:6px auto!important;
    content: '';
    background-color: var(--light);
    border-radius: 4px;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    /* 开启硬件加速 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

硬件加速能让元素在不同设备上的渲染逻辑更统一，缓解高DPI屏幕的渲染偏差。

方法3：修正父元素布局干扰 #

部分情况下，父元素的line-height会导致伪元素高度计算异常，可通过以下代码消除影响：

/* 先修正父元素布局 */
.btnMenu02 > span {
    display: inline-block;
    line-height: 0;
    overflow: hidden;
}
/* 保留原有线条样式 */
.btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after {
    display: block;
    width: 22px;
    height: 2px !important;
    margin:6px auto!important;
    content: '';
    background-color: var(--light);
    border-radius: 4px;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}

通过重置父元素的行高和溢出规则，避免布局逻辑干扰线条的高度渲染。

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