如何让内部div背景紧贴外部div边框 消除两者间细小缝隙

需要实现内部div背景紧贴外部div边框，但实际效果中即使不设置border-radius，两者之间仍存在细小间隙。尝试调整box-sizing、background-clip属性均无效果，即使用transform属性将内部div向上偏移10px，间隙依然存在。
该问题在Firefox、Chrome浏览器中均可稳定复现，效果参考截图：

CSS部分 #

#outer{
  height: 5rem;
  width: 10rem;
  background-color: red;
  border: 2px solid blue;
  border-radius: 1rem;
  overflow: hidden;
}
#inner{
  background-color: blue;
  height: 2rem;
  width: 100%;
}
#somecontent{
  height: 3rem;
  width: 100%;
}

HTML部分 #

<div id="outer">
    <div id="inner">
    </div>
    <div id="somecontent"></div>
</div>

这个间隙是浏览器渲染时的亚像素抗锯齿误差导致的：使用rem作为尺寸单位时，不同浏览器在将rem转换为实际屏幕渲染像素的过程中，会对非整数像素值做抗锯齿平滑处理，内外层元素的渲染计算值出现亚像素级偏差，外层的红色背景就会从偏差位置透出，形成肉眼可见的细间隙。这类渲染误差发生在浏览器合成层渲染阶段，普通的布局偏移（比如transform偏移）无法彻底消除。

任选一种方案即可修复：

• 给内部div加1px以内的负偏移抵消间隙：比如给#inner添加margin: 0 -1px;或者margin-top: -1px;，1px的偏移不会影响正常视觉效果，能直接盖住透出的外层背景
• 从根源避免两层同色拼接：直接给外层#outer设置和内部一致的蓝色背景，移除#inner的蓝色背景属性，不需要额外调整偏移就能完全消除间隙
• 触发同合成层渲染：给外层容器添加transform: translateZ(0);开启硬件加速，让内外层元素在同一个合成层渲染，大幅降低亚像素误差出现的概率
• 规避非整数像素计算：如果场景允许，尽量使用整数值的px作为尺寸单位，或者给内部div的高度加1px冗余，比如设置height: calc(2rem + 1px)，让内部元素轻微超出盖住间隙

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