前天碰到了这么个诡异的事情，现在也是搞不明白为什么会有这种情况，但是问题是解决了。
问题：IE8 里实现不固定宽高图片垂直居中，父容器被撑开。
看到这个问题，应该有写小伙伴还是搞不明白是怎么个回事。先来看看这个例子：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>ie8图片垂直居中父级被撑开问题</title>
<style>
div{
width: 200px;
height: 200px;
border:1px solid black;
float: left;
margin-left: 200px;
}
a{
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px dashed red;
}
img{
max-width: 200px;
max-height: 200px;
vertical-align: middle;
border:none;
}
</style>
</head>
<body>
<!--图片有问题-->
<div>
<a href="#">
<img src="pic2.jpg" alt="">
</a>
</div>
<!-- 图片有问题-->
<div>
<a href="#">
<img src="pic3.jpg" alt="">
</a>
</div>
<!-- 图片没问题-->
<div>
<a href="#">
<img src="pic4.jpg" alt="">
</a>
</div>
</body>
</html>
ps:其他的浏览器基本运行正常，这里主要说ie8中出现的这个问题
ie8运行结果
不知道你是否也遇到上面的问题。
开始的时候，我的解决方案是给图片加个100%的宽度，
img{
width: 100%;
max-height: 200px;
vertical-align: middle;
border:none;
}
是不是高兴了一下，解决了？哈哈，细心的小伙伴就会看到，图片宽度没有和父容器一样宽的图片也被拉宽了，这样图片的比例就失调了，看第三张。
div{
/*加上这个就可解决*/
display: table;
table-layout: fixed;
/*/////////*/
width: 200px;
height: 200px;
border:1px solid black;
float: left;
margin-left: 200px;
}
好了，头疼的问题解决了，这种解决的方案就类似于表格的垂直居中了。
如果你还有别的解决方案，记得留下足迹哦...