Chrome打开下载标签页时fixed定位元素边框与背景移位求助

该问题是Chrome内置页面（如chrome://downloads/）的默认样式规则与普通自定义页面不同导致的，主要触发点有三个：盒模型未包含边框、百分比高度计算受根元素默认样式干扰、过小的line-height导致渲染基线偏移。

具体修复步骤 #

• 新增box-sizing: border-box属性，将5px的边框厚度纳入元素总宽高计算，避免边框额外占据空间导致的位置偏移
• 把height: 11%替换为固定像素值或vh单位，如height: 80px或height: calc(11vh - 10px)（减10px是抵消上下共10px的边框厚度），规避Chrome内置页面百分比高度计算偏差的问题
• 调整line-height属性值为1及以上，避免极小行高导致的元素渲染基线异常，若需要调整文本垂直位置，改用padding-top或transform: translateY()实现
• 可选添加transform: translateZ(0)触发Chrome硬件加速，强制元素单独生成渲染图层，避免背景和边框与文本的图层错位

修改后完整代码 #

.classA {
    box-sizing: border-box;
    border: 5px solid;
    text-align: left;
    line-height: 1;
    position: fixed;
    height: calc(11vh - 10px);
    top: 110px;
    right: 5px;
    left: 5px;
    transform: translateZ(0);
}

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