IE11中图片布局失效求助（Chrome显示正常）

问题描述 #

我做的页面在Chrome浏览器显示完全正常，但在IE11里，标签页中的图片无法正常缩放，整个布局都乱了。以下是我的代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#img">Img 1</a></li>
<li><a data-toggle="tab" href="#imgg">Img 2</a></li>
<li><a data-toggle="tab" href="#imge">Img 3</a></li>
<li><a data-toggle="tab" href="#imgee">Img 4</a></li>
</ul>
<div class="tab-content">
<div id="img" class="tab-pane fade in active">
<img src='img1.png' width="90%" />
</div>
<div id="imgg" class="tab-pane fade">
<img src='img2.png' width="90%" />
</div>
<div id="imge" class="tab-pane fade">
<img src='img3.png' width="90%" />
</div>
<div id="imgee" class="tab-pane fade">
<img src='img4.png' width="90%" />
</div>
</div>
</div>
<style>
.tab-pane { margin-top: 10px; }
</style>

问题原因及解决办法 #

嘿，我之前也踩过IE11和Bootstrap 3兼容的坑！这个问题主要有两个核心原因：

• IE11对隐藏元素的尺寸计算bug：你的标签页初始是隐藏状态（带有fade类），IE11在渲染隐藏元素时，不会正确计算它的容器宽度，导致图片的width="90%"没有正确的参照基准，缩放自然就乱了。
• 缺少响应式图片的兼容处理：Bootstrap 3提供了img-responsive类来处理响应式图片，它会设置max-width: 100%; height: auto;，这个样式在IE11里能更好地触发正确的缩放逻辑，而你直接用内联的width="90%"没有结合这个类，IE11无法正确识别自适应规则。

修复后的代码示例

只需要给所有图片加上img-responsive类，再调整一下宽度控制（用CSS代替内联属性更稳妥）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#img">Img 1</a></li>
<li><a data-toggle="tab" href="#imgg">Img 2</a></li>
<li><a data-toggle="tab" href="#imge">Img 3</a></li>
<li><a data-toggle="tab" href="#imgee">Img 4</a></li>
</ul>
<div class="tab-content">
<div id="img" class="tab-pane fade in active">
<img src='img1.png' class="img-responsive tab-img" />
</div>
<div id="imgg" class="tab-pane fade">
<img src='img2.png' class="img-responsive tab-img" />
</div>
<div id="imge" class="tab-pane fade">
<img src='img3.png' class="img-responsive tab-img" />
</div>
<div id="imgee" class="tab-pane fade">
<img src='img4.png' class="img-responsive tab-img" />
</div>
</div>
</div>
<style>
.tab-pane { margin-top: 10px; }
.tab-img { width: 90%; /* 用CSS控制宽度，比内联属性更兼容 */ }
</style>

如果还是有小问题，可以再给.tab-content加上overflow: hidden;，确保容器的尺寸计算更稳定。

内容的提问来源于stack exchange，提问作者Brunooo