即使沒有必要，滾動條也可見 -

Question

我使用overflow：auto時出錯。

錯誤： http ： //cl.ly/image/0K1W3t151T0S

我使用的代碼是http://codepen.io/sebazelonka/pen/pDGin

即使內容的高度與容器的高度相同，滾動條也是可見的。 我嘗試了不同的選項，但錯誤仍然存​​在。

我在不同的瀏覽器中嘗試過它，包括FF，Chrome，Safari和Opera，並且總是有相同的錯誤。

HTML

<div class="image-viewport portrait" style="width: 100%; height: 400px;">
      <div class="image-wrapper" style="width: 100%; height: 400px;">
           <img src="http://www.hdwallpapersview.com/wp-content/uploads/2013/05/landscape_7.jpg">
      </div>
</div>

CSS

body {
  background: #999;
}

.image-viewport {
  overflow: auto;
}

.image-wrapper {
  background: #333;
  text-align: center;
}

.image-viewport.portrait img {
  height: 100%;
}

Answer 1

這是兩種不同的解決方案：

• 將vertical-align:top添加到img元素。 （默認為vertical-align:baseline ）

• 將img更改為block級元素。

使用vertical-align:top 更新了Codepen示例

.image-viewport.portrait img {
    height: 100%;
    vertical-align:top;
}

使用display:block 更新了Codepen示例

注意：對於水平居中，使用margin:0 auto ，因為text-align:center將不再起作用，因為元素不再是inline元素。

.image-viewport.portrait img {
    height: 100%;
    display:block;
    margin:0 auto;
}

另外，如果窗口太小，請不要與身體上添加的滾動條混淆。 img包裝器上的滾動條已被刪除。

Answer 2

只需將.image-viewport類更改為：

.image-viewport {
  overflow: hidden;
}