我在使用 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%;
}
最佳答案
这里有两种不同的解决方案:
将
vertical-align:top
添加到img
元素。 (默认为vertical-align:baseline
)将
img
更改为block
级别的元素。
Updated Codepen example使用 vertical-align:top
.image-viewport.portrait img {
height: 100%;
vertical-align:top;
}
Updated Codepen example使用 display:block
注意:对于水平居中,使用 margin:0 auto
,因为 text-align:center
将不再起作用,因为元素不再是 inline
元素。
.image-viewport.portrait img {
height: 100%;
display:block;
margin:0 auto;
}
此外,如果窗口太小,请不要与添加在主体上的滚动条混淆。 img
包装器上的滚动条已被删除。
关于html - 即使不需要滚动条也可见 -,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20223977/