ask2

display:table-cell为什么在ie8下出现这种情况，有哪位知道？ 财富值100

2016-10-12 11:10发布

站内问答 /
2767 1 3

在使用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>
友情提示: 此问题已得到解决，问题已经关闭,关闭后问题禁止继续编辑，回答。
1条回答
田鼠 - 这个人很懒，什么都没留下
2016-10-12 11:36

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

一周热门 更多>