Question

我有一个图像在IE11以外的所有浏览器中都能正常显示。该图像具有以下scss：

 &__container {
    text-align: center;
  }

  &__logo {
    img {
      background: transparent;
      height: 13.5em;
    }
  }

在IE11中，图像的底部和图像的右侧被切除。我为IE11添加了一些自定义CSS：

&__logo {
    img {
      background: transparent;
      height: 13.5em;
      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        width: 30%;
        height: 30%;
      }
}

这将显示整个图像，但是它仍然比您在其他浏览器中看到的大得多，并在其下方添加了填充。 这还会阻止text-align:center正常工作，并使偏心向左对齐。

我尝试仅删除高度或删除宽度，但这并不能解决问题。

任何建议都是最有帮助的！

Answer 1

您刚刚输入了没有html的任何代码，所以我不知道这是否是一个好的解决方案。添加到img display: block;，这应该在IE11中有帮助

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  padding: 0;
}

body {
  padding: 0;
  border: 1px solid #000;
}

.logo {
  display: block;
  margin: auto;
  width: 800px;
  border: 3px solid #ff0000;
}

.logo img {
  display: block;
  background: transparent;
  height: 13.5em;
}

<div class="container">
  <div class="logo">
    <img src="https://dummyimage.com/600x400/000/fff" alt="">
  </div>
</div>

Answer 2

奇怪的是，删除.form-row并添加height解决了这个问题。

max-width

如果有人知道为什么会这样，请发表评论，因为这对于将来的了解会很有帮助！

IE11中的Scss Scale图像

2 个答案: