3

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>
4

2 回答 2

3

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

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

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

这是工作演示，我已经在 IE 中对其进行了测试，并且对我来说似乎工作正常。

于 2013-10-22T18:28:35.120 回答
0

看起来像一些新的 IE 错误。但可以解决。

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

您不能transition为所有浏览器放置所有效果，这将在其他浏览器中丢失后退动画。

于 2013-10-17T07:12:39.590 回答