在使用display：table-cell实现不定大小图片水平垂直居中，但是在实现的过程中，自己发现了一个问题就是，如果图片的 宽：高>1 同时 图片的原始大小宽度大于容器的宽度时，在ie8中就会出现下图的效果
<!do优艾设计网_PS问答ctype 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小时前
先感谢楼主邀请，但优艾设计网_设计圈是很抱歉本人没有ie8浏览器版本，测试不了。建议楼主多带带做ie8的兼容处理，增加/修改样式。还有，不知道楼主有没有注意到，你的第三张图片和第一张图片其实都是宽/高>1的，也就是说如果真的是有相同问题的话，第三张图片的父元素也应该会被撑宽的，楼主请再仔细检查一下问题所在。很遗憾没有解决楼主的问题
加载中,请稍侯......
精彩评论