javascript - display:table-cell为什么在ie8下出现这种情况，有哪位知道？
本文介绍了javascript - display:table-cell为什么在ie8下出现这种情况，有哪位知道？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
在使用display：table-cell实现不定大小图片水平垂直居中，但是在实现的过程中，自己发现了一个问题就是，如果图片的 宽：高>1 同时 图片的原始大小宽度大于容器的宽度时，在ie8中就会出现下图的效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</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>
<!--图片328x220 有问题-->
<div>
<a href="#">
<img src="11.jpg" alt="">
</a>
</div>
<!-- 图片720x1280 没问题-->
<div>
<a href="#">
<img src="22.jpg" alt="">
</a>
</div>
<!-- 图片200x150 没问题-->
<div>
<a href="#">
<img src="44.jpg" alt="">
</a>
</div>
</body>
</html>哪位知道？
解决方案
最外层的div样式更改如下：
div{
display: table;
table-layout: fixed;
width: 200px;
height: 200px;
border:1px solid black;
float: left;
margin-left: 200px;
}虽然img价格width:100%可以解决，但是图片比例问题会失调！所以建议以上这种方法！
这篇关于javascript - display:table-cell为什么在ie8下出现这种情况，有哪位知道？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
