html - 在不降低 Firefox 滚动速度的情况下摆脱 CSS 字体大小填充

Question

我有一个网络应用程序，其中有很多高大的图像，我想在滚动 div 内的页面上水平居中显示，顶部或底部没有任何填充，整个图像都包裹在一个“窗口”中在example code .现在，这里的问题是，如果您删除 font-size: 0来自 .view 的声明，您会在图像下方获得少量填充。将字体大小设置为 0 可以消除填充，但同时，它会使 div 内的滚动在 Firefox 中非常慢，因为 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;
}

Answer 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; }