padding-top引发异常边框？Chrome开发者工具开启时问题求助

我来帮你解决这个Chrome老版本里的奇怪渲染问题~你遇到的这个现象是Chrome 65版本的一个已知渲染bug，而且只在打开开发者工具时触发，属于浏览器渲染引擎在调试模式下的计算偏差。

问题复现代码 #

<style>
.outer { 
  background-color: black; 
  padding-top: 20px; 
} 
.inner { 
  height: 100px; 
  background-color: white; 
}
</style>
<div class="outer">
  <div class="inner"></div>
</div>

问题原因 #

这个bug的本质是Chrome在调试模式下，对父容器的padding区域和子元素的边界计算出现了错误，导致原本应该是父容器黑色背景的padding-top区域，出现了类似边框的异常线条，属于老版本浏览器的临时渲染故障。

解决办法 #

这里给你几个可行的方案，按推荐优先级排序：

• 最彻底的方案：升级Chrome浏览器
  这个bug在Chrome 66及后续版本已经被官方修复了，升级到最新版本不仅能解决这个问题，还能提升浏览器的安全性和性能。
• 临时修复：给父容器添加overflow: hidden
  强制浏览器重新计算容器的渲染区域，规避这个计算偏差：

  .outer { 
    background-color: black; 
    padding-top: 20px; 
    overflow: hidden; /* 添加这一行 */
  }
  

• 临时修复：给父容器添加透明边框
  通过修改容器的边框属性，让浏览器重新渲染padding区域，消除异常线条：

  .outer { 
    background-color: black; 
    padding-top: 20px; 
    border-top: 1px solid transparent; /* 添加这一行 */
  }
  

内容的提问来源于stack exchange，提问作者김민준