css-overflowscrollwithpadding-Webkit-VS-Firefox
场景：有一个容器，宽高一定，有内边距，当容器的内容（子元素）超出容器时出现滚动条。这一场景在 Chrome 和 Firefox（IE）表现不一致，border-box 布局。代码如下： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>title</title> <style type="text/css"> * { box-sizing: border-box; } .box { overflow: auto; border: 4px solid #f00; padding: 30px; width: 200px; height: 200px; background-color: #ffb475; } .content { width: 100%; height: 150px; background-color: #8b8bff; } </style></head><body> <div class="box"> <h3>这是一个标题</h3> <div class="content"></div> </div></body></html>Chrome 74 Firefox 67 IE 11 可以看到，Chrome 会将滚动容器的下内边距（padding-bottom）一起作为滚动内容，而 Firefox 和 IE 不会。我们期望得到的是 Chrome 的行为。为了让 Firefox,IE 与 Chrome 变现一致，有如下解决方案： ...