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 Hacks，它就像下面这样的例子：

/* 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而不是max-width和max-height的百分比。

@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中的一个错误：Bug Report。添加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
}

非常讨厌的错误！

图像max-width max-height在IE 11中不起作用

3 个答案: