我有一种情况只发生在IE11上. Chrome,Firefox,Safari(平板电脑和手机)都按预期工作.我已经创建了一个从侧面滑入/滑出的面板(DIV)的转换.在页面加载时,它不应该“动画”,而是捕捉到适当的位置.但是在IE11当页面加载时,只有当与该选择器的CSS特性的最高级别匹配的元素涉及到媒体查询时才会播放该转换.奇怪的是,媒体查询甚至不合适(当我的测试中加载页面时,绝对不应用).
以下简单的代码重复了我的问题：
CSS
.standard {
transition: all 1s ease-in-out;
transform: rotate(45deg);
width:50px; height:50px; border:1px solid black; background-color:green; margin:3em;
}
button + .standard {
transform: rotate(30deg);
}
button.on + .standard {
transform:rotate(0deg);
}
/* REMOVE THE FOLLOWING COMMENTS to see issue on page load using IE11 - make sure window is larger than 800 pixels */
/*
@media only screen and (max-width:800px) {
button.on + .standard {
background-color:red;
transform:rotate(270deg);
}
}
*/
HTML
<button class="on" onclick="this.classList.toggle('on');">Rotate Test</button>
<div class="standard"> </div>
因此,如果浏览器窗口的大小大于800像素,则不应应用媒体查询.然而,IE11似乎就像应用媒体查询一样,然后恢复到实际触发转换的非媒体查询CSS.如果媒体查询内容选择器与媒体查询之外定义的最高级别的CSS特性不匹配,则在页面加载时不会观察到转换(换句话说,如果我的媒体查询CSS选择器不太具体[说button.standard],你不会看到转换“播放”).
任何想法如何防止这种过渡从页面加载使用IE11“播放”,而不必编写javascript？
