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>

哪位知道？

node.js

html5 html css javascript

阅读 6.2k

5 个回答

✓ 已被采纳

最外层的div样式更改如下：

div{
    display: table;
    table-layout: fixed;
    width: 200px;
    height: 200px;
    border:1px solid black;
    float: left;
    margin-left: 200px;
}

虽然img价格width:100%可以解决，但是图片比例问题会失调！所以建议以上这种方法！

undefind_5

1.5k1297133

发布于
2016-10-12

先感谢楼主邀请，但是很抱歉本人没有ie8浏览器版本，测试不了。建议楼主单独做ie8的兼容处理，增加/修改样式。还有，不知道楼主有没有注意到，你的第三张图片和第一张图片其实都是宽/高>1的，也就是说如果真的是有相同问题的话，第三张图片的父元素也应该会被撑宽的，楼主请再仔细检查一下问题所在。很遗憾没有解决楼主的问题

brook

3.1k4726

发布于
2016-10-12

img{

       max-width:100%;

首先，感谢楼主的邀请！
其次，不好意思，近段时间有点忙，没有及时回复，很抱歉！
在我电脑上ie8是正常显示的，但是ie8以下不支持display:table-cell;也不支持vertical-align:middle;
解决办法：对a设置
A{display:block;line-height:200px}
楼主可以设置一下看看是否有效