个人中心
gpt4 book ai didi

javascript - IE11 和 Mozilla css 转换的奇怪东西

转载 作者：太空宇宙 更新时间：2023-11-03 21:40:34 25 4
gpt4 key购买 nike

所以，最近我发现我可以使用 css:transitions 使网页看起来更流畅。

然而，当我在 Mozilla Firefox 和 IE11 上测试我的网站时，它们都有奇怪的小错误，这些错误破坏了我试图制作的网站的“流畅度”。

Chrome 是我的网站应该如何运作的一个例子。有 4 个函数和 6 个 css 转换。

功能正常，问题如下:

在 IE 中(11 且很可能更低):id div“main_wrapper”中的 css 转换无法正常工作。它会立即更改宽度，而不是像我要求的那样花费 1.5 秒。原因是这样的。左侧的导航栏宽度为 19%，左侧有一个 float 。 “main_wrapper”的宽度为 80%，右侧有 float 。这会在它们之间留下 1% 的间隙，如果“main_wrapper”div 立即增加/更改为 calc(100% -1px) 宽度，那么它将被向下推，直到导航栏完成将其宽度降低到 0.1px。这基本上破坏了我的功能的全部意义:(而且我不确定如何解决它。

在 Mozilla Firefox 中:在这个浏览器中有一个类似的错误，除了没有那么严重，而不是在 1.5 秒内从“#Nav #About，#Work，#Contact”转换“字母间距”，它是立即做。此外，这使我的网站看起来不那么柔滑。

似乎这些浏览器根本就没有读取这些转换，因为它们可以很好地执行其他转换，我想知道我做错了什么，因为这对我来说是相对较新的。这是现场直播:Paxframe

HTML: 

<title>Bryan the Lion</title>
</head>
<body>
    <script type="text/javascript">
    function bla(){
        var myElement = document.querySelector("#nav");
        var myElement2 = document.querySelector("#nav ul") ;
        myElement2.style.marginTop = "100px";
        myElement.style.width = "0.1px";
        myElement2.style.opacity = "0.0" ;

    }
    function bla2(){
        var myElement = document.querySelector("#nav");
        var myElement2 = document.querySelector("#nav ul") ;
        myElement2.style.marginTop = "100";
        myElement.style.width = "19%";
        myElement2.style.opacity = "1.0" ;
    }
    function keepWrapper(){
        var myElement2 = document.querySelector("#main_wrapper") ;
        myElement2.style.width = "calc(100% - 1px)";
    }
    function revertWrapper(){
        var myElement2 = document.querySelector("#main_wrapper") ;
        myElement2.style.width = "80%";
    }
    </script>

    <div id = "header" onmouseover= "bla2(),revertWrapper()">
        <div id="imgdiv"><img src="images/Pax_Frame.png"></div>
    </div>
    <div id ="nav" onmouseover = "bla2(),revertWrapper()">
        <ul>
            <li id = "About" onclick=   "$('#main_inner1').animatescroll({element:'#main'});">About<a ></a></li>
                <li id = "Work" onclick= "$('#main_inner2').animatescroll({element:'#main'});">Work<a href="#" ></a></li>
                <li id = "Contact" onclick= "$('#main_inner3').animatescroll({element:'#main'});">Contact<a href="#" ></a></li> 
            </ul>
    </div>  
    <div id = "main_wrapper" onmouseover = "bla(),keepWrapper()" >
        <div id ="main">
        <div id = "main_inner1" >
        <div style = "width:100% ; height: 250px ; font- size: 140% ;">
                    <p style = "margin-left:5% ;">
                        To us the m</p>
            </div>
            <div class = "floatleft" style = "margin-left:5%;">
                    <div class = "textDiv"><p> 
                    <span style = "color:#0000FF ;">we have
                                             that special touch.
                    </span></p>
                    </div>
                </div>
                <div class = "floatleft">

                </div>
                <div class = "floatleft" >

                </div>
            </div>
            <div id = "main_inner2" >
                <p>some div2</p>
            </div>  
            <div id = "main_inner3">
                <p>some div3</p>
            </div>  
        </div>
    </div>


</body>


</html>

CSS:

body{
height: 100% ; 
}
@font-face {
font-family: "Exo";
src: url(fonts/Exo-Regular.otf) format("truetype");
}
@font-face{
font-family: "Dev";
src: url(fonts/devroye.ttf) format("truetype");
}
a{text-decoration: none;}
#header{
height: 98px ;
max-height: 20% ;
width: 100% ;
color: white ;
}
#header #imgdiv{
margin: 0 auto ;
width: 220px ;
height: 90px ;
}
#main_wrapper{
height: calc(100% - 100px );
float: right;
width: 80%;
overflow: hidden;
transition:width 1.5s;
-webkit-transition:width 1.5s;

}
#main_wrapper #main{
width: 103%;
height: 100%;
overflow-y:scroll; 
}
#main_inner1{
background: rgba(192,192,192 , 0.1) ;
height: 1000px ;
width: 100%;
background-repeat: repeat;
}
#main_inner1 .floatleft{
border: dashed 2px #e0e3e5 ;
height: 30% ;
width: 30% ;
float: left;
font-family: Anton ;
}
#main_inner1 .floatleft:hover{
background: #CEE3F6 ;
border: solid 2px white ;
}
#main_inner1 .floatleft .textDiv{
width: 300px ;
height: 150px ;
margin: 0 auto ;
font-size: 140% ;
padding: 5px ;
}
#main_inner2{
height: 1000px ;
width: 100% ;
background: #7994a7 ;
}
#main_inner3{
height: 1000px ;
width: 100% ;
background: #7994a7 ;
}
#nav{
float: left ;
width: 19% ;
height: 80% ;
-webkit-transition:width 1.5s; /* For Safari 3.1 to 6.0 */
transition:width 1.5s;
font-family: Exo ;

}
#nav ul{
margin-top: 100px ;
text-align: center;
-webkit-transition:opacity 1.3s; /* For Safari 3.1 to 6.0 */
transition:opacity 1.3s;

}
#nav ul li a{
display: block
cursor: pointer;;
height: 10px ;


}
#nav #About{
cursor: pointer;
-webkit-transition:letter-spacing 1.5s; /* For Safari 3.1 to 6.0 */
transition:letter-spacing 1.5s;
}
#nav #About:hover{
color: red ;
letter-spacing: 18px ;
}
#nav #Work{
cursor: pointer;
-webkit-transition:letter-spacing 1.5s; /* For Safari 3.1 to 6.0 */
transition:letter-spacing 1.5s;
 }
#nav #Work:hover{
color: red ;
letter-spacing: 18px ;
}
#nav #Contact{
cursor: pointer;
-webkit-transition:letter-spacing 1.5s; /* For Safari 3.1 to 6.0 */
transition:letter-spacing 1.5s;
}
#nav #Contact:hover{
color: red ;
letter-spacing: 18px ;
}

最佳答案

正如 Bryan 所说，IE11 在使用 calc() 值作为转换到/从的值时似乎有一个错误。

我打开了一个包含 jsfiddle 的错误报告:http://connect.microsoft.com/IE/feedback/details/868216/cannot-use-css-calc-as-value-for-css-transition-ie11 .仍在等待他们的反馈。

[抱歉，不想创建一个全新的答案，但还不能发表评论。]

关于javascript - IE11 和 Mozilla css 转换的奇怪东西，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23837202/

25 4 0
文章推荐： opencv - 如何为 OpenCV 启用日志记录
文章推荐： opencv - Nim 无法打开 'opencv/highgui'
文章推荐： c# - 组合框未绑定(bind)
文章推荐： html - CSS 将屏幕分成 4 个相等的部分，它们之间有边框
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com