gpt4 book ai didi

css - 在 ie 10 中带有过渡的页面加载

转载 作者:行者123 更新时间:2023-11-28 09:49:39 25 4
gpt4 key购买 nike

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

最佳答案

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

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

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

这里是 working DEMO ,我已经在 IE 中对其进行了测试,并且对我来说似乎工作正常。

关于css - 在 ie 10 中带有过渡的页面加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18958799/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com