溢出：隐藏不按预期工作
[英]overflow: hidden not working as I expect
问题描述
I have a html page that displays a list of images generated by a server, but I don't want to display the bottom 2% of the image. 
我有一个html页面，显示服务器生成的图像列表，但我不想显示图像的底部2％。 My solution was to use overflow:hidden on the containing div for the image and then to give the image a 2% margin-top after setting it to display:inline-block. 我的解决方案是使用overflow：隐藏在图像的包含div上，然后在将其设置为显示后为图像提供2％的margin-top：inline-block。 This worked great for a simple proof of concept page I built, but not so much for the actual page. 这对于我构建的简单概念验证页面非常有用，但对于实际页面而言并非如此。 I've uploaded both pages here . 我在这里上传了两个页面。
Edit: jsbin pages: 编辑：jsbin页面：
I've tried both chrome and IE9, but no luck in either browser 我已经尝试过chrome和IE9，但在任何一个浏览器中都没有运气
This is the html for the page that it's not working for. 这是它不适用的页面的html。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="./Test_files/ci.css">
</head>
<body>
<div id="StockListTable" class="ListTable">
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 1" src="./Test_files/GetPreviewImage"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 2" src="./Test_files/GetPreviewImage(1)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 3" src="./Test_files/GetPreviewImage(2)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 4" src="./Test_files/GetPreviewImage(3)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 5" src="./Test_files/GetPreviewImage(4)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 6" src="./Test_files/GetPreviewImage(5)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 7" src="./Test_files/GetPreviewImage(6)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 8" src="./Test_files/GetPreviewImage(7)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 9" src="./Test_files/GetPreviewImage(8)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 10" src="./Test_files/GetPreviewImage(9)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 11" src="./Test_files/GetPreviewImage(10)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 12" src="./Test_files/GetPreviewImage(11)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 13" src="./Test_files/GetPreviewImage(12)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 14" src="./Test_files/GetPreviewImage(13)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 15" src="./Test_files/GetPreviewImage(14)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 16" src="./Test_files/GetPreviewImage(15)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 17" src="./Test_files/GetPreviewImage(16)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 18" src="./Test_files/GetPreviewImage(17)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 19" src="./Test_files/GetPreviewImage(18)"/></div>
<div class="PreviewCell"> <img style="border-style:none" alt="Preset 20" src="./Test_files/GetPreviewImage(19)"/></div>
</div>
</body>
</html>
and the CSS 和CSS
html
{
margin:0;
padding:0;
width:100%;
}
body
{
margin:0;
padding:0;
font-family:sans-serif;
color:white;
background-color:black;
width:100%;
overflow-x:hidden;
}
.PreviewCell
{
width:12%;
height:20%;
overflow:hidden;
float:left;
padding-left:1px;
padding-right:1px;
}
.ListTable
{
margin:0;
width:104%;
height:86%;
}
.PreviewCell img
{
display:inline-block;
width:100%;
height:100%;
margin-top:2%;
}
It does add the margin to the top of the image, but it doesn't hide the overflow, it just makes the rows of images have more space between them. 它确实将边距添加到图像的顶部，但它不会隐藏溢出，它只会使图像行之间有更多的空间。
Here's the page that it does work for. 这是它适用的页面。
<html>
<head>
<style type="text/css">
.testimage
{
display:inline-block;
width:100%;
height:100%;
margin-top:2%;
}
.container
{
width:12%;
height:20%;
overflow:hidden;
float:left;
padding-left:1px;
padding-right:1px;
}
</style>
</head>
<body bgcolor="#000000">
<div class="container">
<img class="testimage" src="http://192.168.0.76/ImprovCollection/GetPreviewImage?URL=sspci://StockPresets/1&Width=75&Height=76&Color=%23000000" onclick="alert('test');"/>
</div>
<div class="container">
<img class="testimage" src="http://192.168.0.76/ImprovCollection/GetPreviewImage?URL=sspci://StockPresets/1&Width=75&Height=76&Color=%23000000" onclick="alert('test');"/>
</div>
<div class="container">
<img class="testimage" src="http://192.168.0.76/ImprovCollection/GetPreviewImage?URL=sspci://StockPresets/1&Width=75&Height=76&Color=%23000000" onclick="alert('test');"/>
</div>
<div class="container">
<img class="testimage" src="http://192.168.0.76/ImprovCollection/GetPreviewImage?URL=sspci://StockPresets/1&Width=75&Height=76&Color=%23000000" onclick="alert('test');"/>
</div>
</body>
</html>
I'm so confused as to why this isn't working that I even validated the page (which I never do) and it checked out. 我很困惑，为什么这不起作用，我甚至验证了页面（我从未做过），并检查出来。
Any help would be fantastic. 任何帮助都会很棒。
1 个解决方案
解决方案1
2 已采纳 2012-04-13 20:05:40
If you want the bottom margin removed, you can use a negative margin cropping technique. 如果要删除底部边距，可以使用负边距裁剪技术。
.PreviewCell img
{
display:inline-block;
width:100%;
height:100%;
margin-bottom: -4%;
}
If you're looking to remove the white line, the minimum percentage varies with browser width. 如果您要删除白线，则最小百分比会随浏览器宽度而变化。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.