Internet Explorer 视口宽度单位错误与 img 标签

Question

所以我制作了一个页面介绍，其中有 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>

Answer 1

在#loading img 上添加 100% 高度

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

Internet Explorer 视口宽度单位错误与 img 标签

Internet explorer viewport width units error with img tag

javascript

html

css

internet-explorer

viewport-units