在不减慢 Firefox 滚动速度的情况下摆脱 CSS 字体大小填充答案

【问题标题】：Getting rid of CSS font-size padding without slowing Firefox scroll speed在不减慢 Firefox 滚动速度的情况下摆脱 CSS 字体大小填充
【发布时间】：2014-11-28 09:57:46
【问题描述】：

我有一个网络应用程序，其中有很多高大的图像，我想在滚动 div 内的页面上水平居中显示，顶部或底部没有任何填充，整个东西都包裹在一个“窗口”中在example code。现在，这里的问题是，如果您从.view 中删除font-size: 0 声明，您会在图像下方获得少量填充。将字体大小设置为 0 会消除该填充，但与此同时，它会使 Firefox 中的 div 内的滚动非常慢，因为 Firefox 中的滚动速度与font-size 相关，详见here。我的问题是 - 在这种情况下，有没有办法在不影响 Firefox 滚动速度的情况下摆脱烦人的额外填充？

我想避免任何依赖硬编码值的解决方案，例如。我不想做img { margin-bottom: <-Xpx/-Xem>; }之类的事情，因为这不是可靠的跨浏览器（例如，设置 16px 字体大小会导致额外的填充在 Chrome 中为 3px，在 Firefox 中为 4px在 IE11 中为 5px)。

HTML：

<div class="window">
    <div class="view">
        <img src="http://placekitten.com/300/2000" alt="kitty" />
   </div>
</div>

CSS：

body {
    margin: 0;
    padding: 0;
}

.window {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: center;
    font-size: 0;
}

【问题讨论】：

标签： html css firefox cross-browser

【解决方案1】：

玩弄我自己的 JSFiddle 我设法自己解决了这个问题 - 我只需将图像包装在一个额外的 div 中并在其中移动 font-size: 0 声明，因此滚动速度保持正常在实际滚动的父 div 中。似乎发布关于此的内容最终成为橡皮鸭调试的成功案例。

HTML：

<div class="window">
    <div class="view">
        <div class="wrap">
          <img src="http://placekitten.com/300/2000" alt="kitty" />
        </div>
   </div>
</div>

CSS：

body {
    margin: 0;
    padding: 0;
}

.window {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: center;
}

.wrap { font-size: 0; }

【讨论】：