Question

我正在为网站创建动画侧边栏。它看起来就像我想在每个浏览器中一样，除了在Internet Explorer中它看起来很难看。我试图启用硬件加速，但它没有解决问题点击＆＃34;更多信息＆＃34;在Internet Explorer的屏幕左上角查看错误谢谢你的任何建议！

HTML：

<!DOCTYPE html>
<html lang="en-us">
<head>
    <link rel="stylesheet" href="css/style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/jquery.js"></script>
</head>
<body>
    <div id="content">
        <div id="content-inner">
            <button id="more-info">More Information</button>
        </div>
    </div>
    <div id="background-rectangle"></div>
    <div id="background-triangle"></div>
    <div id="info"></div>
</body>

CSS：

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    color: white;
    margin: 0px;
    padding: 0px;
    font-family: 'Ubuntu', sans-serif;
}
#content {
    position: absolute;
    width: 40vw;
    height: 100vh;
    z-index: 9999999999;
}
#background-rectangle {
    position: absolute;
    width: 40vw;
    height: 100vh;
    background: rgba(0,0,0,.7);
    transition: all 1s;
    z-index: 999999999;
}
#background-triangle {
    position: absolute;
    top: 0px;
    left: 40vw;
    width: 0;
    height: 0;
    border-top: 50vh solid transparent;
    border-left: 10vw solid rgba(0,0,0,.7);
    border-bottom: 50vh solid transparent;
    transition: all 1s;
    z-index: 999999999;
}
#background-rectangle.active {
    width: 45vw;
}
#background-triangle.active {
    left: 45vw;
   border-left: 0vw solid rgba(0,0,0,.7) !important;
}
#info {
    padding: 0px 5%;
    left: 100vw;
    position: absolute;
    width: 45vw;
    height: inherit;
    z-index: 9999999999;
    background: rgb(240,240,240);
    color: rgb(90,90,100);
    transition: all 1s;
    overflow-y: scroll;
}
#info.active {
    left: 45vw;
}

jQuery的：

$( document ).ready(function() {
    $( '#more-info').click(function() {
        $( '#background-rectangle' ).toggleClass('active');
        $( '#background-triangle' ).toggleClass('active');
        $( '#info' ).toggleClass('active');
    });
});

Internet Explorer难看的CSS转换

0 个答案: