Question

我有一个网络应用程序，我有很多高大的图像，我想在页面上水平居中显示滚动div，顶部或底部没有任何填充，整个事情包裹在＆＃34;窗口＆＃34;就像在example code中一样。现在，问题在于，如果从font-size: 0中删除.view声明，则会在图像下方获得少量填充。将字体大小设置为0可以摆脱该填充，但同时，它使得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;
}

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

摆脱CSS字体大小填充，而不会减慢Firefox滚动速度

1 个答案: