图像最大宽度最大高度在IE 11中不起作用

Question

我在网站上使用fullPage.js以及以下html和css作为图像滑块。

它适用于Mac上的Safari和Chrome，但不适用于Windows上的IE 11。

有谁知道如何解决这个问题？

演示： www.aronsommer.com

<div class="slide"><img src="images/bitumenpainting1.jpg" alt="Bitumenpainting 1"></div>

.slide img {
width : auto;
height : auto;
max-width : 90%;
max-height : 90%;
margin : 0 auto;
padding : 0;
display : block;
}

Answer 1

抱歉。 如果您处理CSS文件，则会更容易。 您需要一些CSS技巧，就像下面这样：

/* IE7 */
*:first-child+html #element { color: red } 

/* IE7, FF, Safari, Opera  */
html>body #elemento { color: red }

/* IE8, FF, Safari, Opera (Everything but IE 6,7) */
html>/**/ body #elemento { color: red }

/* Opera 9.27 and safari 2 */
html:first-child #element { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #element { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #element { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #element {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#element { color: red }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#element { color: red }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #element { color: red }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #element { color: red }

/* Tudo menos IE6-8 */
:root *> #element { color: red }

/* IE7 */
*+html #element {  color: red }

/* Firefox 3.0+ */
#element,  x:-moz-any-link, x:default { color: red }

您需要更改所有CSS才能与浏览器兼容进行编程。

我希望这有帮助

Answer 2

以下媒体查询已解决我的IE 11问题。

使用视口单位vw和vh代替最大宽度和最大高度的百分比。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
.slide img {
max-width : 90vw;
max-height : 90vh;
}
}

Answer 3

这似乎是IE11： 错误报告中的错误 。 添加flex: 1 （如报告中所示）

.slide img {
    flex: 1
    max-width: 100%
    max-height: 100%
}

为我工作。 您可能必须将容器的显示模式更改为flexbox。 这样（示例中心内容）：

.slide {
    display: flex
    align-items: center
    justify-content: center
    width: whateveryoulike
    height: whateveryoulike
}

非常讨厌的错误！