IE浏览器下inline-block元素中的img显示问题
最近在做项目时在ie浏览器上发现了一个问题，被display: inline-block包裹的img的最大宽度始终为图片原始大小，而被display: block包裹的img的最大宽度为父元素的宽度。如下图：
IE浏览器
Chrome浏览器
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IE浏览器中的图片自适应问题</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
img{
max-width: 100%;
}
.container{
width: 500px;
padding: 10px;
border: 1px solid #f60;
margin: 10px;
}
.inline-block{
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<h2>IE下inlin-block的图片显示</h2>
<div class="inline-block">
<img src="https://car3.autoimg.cn/cardfs/product/g28/M02/C6/9F/1024x0_1_q87_autohomecar__ChsEfVvNn3CALbzCAAidpVCRMmU628.jpg" alt="">
</div>
<br>
<br>
<h2>IE下block的图片显示</h2>
<div class="block">
<img src="https://car3.autoimg.cn/cardfs/product/g28/M02/C6/9F/1024x0_1_q87_autohomecar__ChsEfVvNn3CALbzCAAidpVCRMmU628.jpg" alt="">
</div>
</div>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这不是inline-block问题，这是因为你设置宽度的是container，但是inline-block没有设宽度，所以被图片撑开了，谷歌比较先进，能修复一些错误，ie就不行了，所以才这样，解决方法如下：