Question

IE 10中页面加载时红色ul动画从0px到-500px。我做错了什么？我该如何解决？

如果我删除以下内容则不是：

@media screen and (max-width: 800px){
li ul{position:absolute;left:0;top:0}
}

示例代码：

<!DOCTYPE html>
<title>transition in ie 10</title>

<style>
li ul{-moz-transition:top 0.7s ease-in-out;-ms-transition:top 0.7s ease-in-out;-o-transition:top 0.7s ease-in-out;-webkit-transition:top 0.7s ease-in-out;transition:top 0.7s ease-in-out;}
li ul{position:absolute;left:0;top:-500px;background:red;height:500px}
li:hover ul{top:100px;}
li{height:20px;float:left;width:100px}
@media screen and (max-width: 800px){
li ul{position:absolute;left:0;top:0}
}
</style>

<ul>
<li>1
<ul>
<li>2
</ul>
<li>3
<ul>
<li>4
</ul>
</ul>

Answer 1

似乎是IE特定的错误，但您应该可以通过添加以下CSS来解决此问题：

@media (min-width: 1300px) { 
    li ul { display: none; }    
}

如果浏览器宽度超过1300px，此CSS将隐藏元素，在这种情况下也是如此。

这是working DEMO，我在IE中测试了它，似乎对我很好。

Answer 2

看起来像是一些新的IE bug。但它可以解决。

从第一个-ms-transition:top 0.7s ease-in-out;规则中抓取ul li，然后将ul li放入@media部分。

您无法为所有浏览器设置所有transition效果，这会在其他浏览器中丢失后续动画。

页面加载转换为10

2 个答案: