带有 img 标签的 Internet Explorer 视口宽度单位错误答案

【问题标题】：Internet explorer viewport width units error with img tag带有 img 标签的 Internet Explorer 视口宽度单位错误
【发布时间】：2015-07-30 23:59:59
【问题描述】：

所以我做了一个页面介绍，其中有 svg 文件，一个里面是彩色的图形，另一个是仅概述的。该图有一个隐藏的溢出，它有一个动画来增加它的宽度。像这样的：

<div>
    <figure> <img /> </figure> <-- Overflow hidden>
    <img /> <-- Only borders
</div>

在所有浏览器上看起来都不错，除了 IE 而且我一直在玩所有容器的宽度，但我无法使其适合并使其响应。有什么想法吗？

(jsFiddle)

$(window).ready(function() {
  $('figure').animate({
    width: "100vw",
  }, 3000, function() {});
});

body {
  background-color: red;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}
html {
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}
#loading {
  height: 100%;
  width: 50vw;
}
#loading figure {
  position: absolute;
  overflow: hidden;
  width: 0vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
#loading img {
  width: 50vw;
  position: absolute;
  top: 0;
}
#loading h4 {
  text-align: center;
  color: #fff;
  font-size: 3em;
  font-weight: 300;
  position: absolute;
  top: 25vh;
  width: 50vw;
  z-index: 2;
}

<body>
  <div id="loading">
    <figure>
      <img src="http://imgh.us/test-color.svg">
    </figure>
    <img src="http://imgh.us/test_68.svg">
  </div>
</body>

【问题讨论】：

你用的是什么版本的IE？ IE

标签： javascript html css internet-explorer viewport-units

【解决方案1】：

在#loading img 上添加 100% 的高度

#loading img { 高度：100%； ... }

【讨论】：