网站与IE11不兼容，在Chrome中可以正常运行

Question

The following snippet works fine in Chrome but does not display correctly in IE11 or Edge. 以下代码段在Chrome中正常运行，但在IE11或Edge中无法正确显示。 The navbar is fixed to the top instead of being aligned to the side and the hover effects do not work. navbar固定在顶部，而不是固定在侧面，并且悬停效果不起作用。

I have ensured that I am declaring; 我保证我要声明； <!DOCTYPE html> , I have also added the following the my <head> to try to force it into edge compatibility: <!DOCTYPE html> ，我还添加了以下我的<head>以试图使其具有边缘兼容性：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

Even after doing this the display is still messed up. 即使这样做，显示屏仍然混乱。 I go into Developer Tools in IE and cannot find any issues there either. 我进入IE中的开发人员工具，也找不到任何问题。

My code: 我的代码：

HTML HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/layout.css"/>
    @RenderSection("CustomStyles", false)
    @RenderSection("CustomScripts", false)
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="col-lg-2 col-md-3 col-sm-8 col-xs-6">
            <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
                <ul class="nav sidebar-nav">
                    <li class="sidebar-brand">
                        <a href="/">Dashboard</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-home"></i> Directories <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Item 1</a></li>
                            <li><a href="#">Item 2</a></li>
                            <li><a href="#">Item 3</a></li>
                            <li><a href="#">Item 4</a></li>
                            <li><a href="#">Item 5</a></li>
                            <li><a href="#">Item 6</a></li>
                            <li><a href="#">Item 7</a></li>
                            <li><a href="#">Item 8</a></li>
                            <li><a href="#">Item 9</a></li>
                            <li><a href="#">Item 10</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-gbp"></i> Contracts <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Item 1</a></li>
                            <li><a href="#">Item 2</a></li>
                            <li><a href="#">Item 3</a></li>
                            <li><a href="#">Item 4</a></li>
                            <li><a href="#">Item 5</a></li>
                            <li><a href="#">Item 6</a></li>
                            <li><a href="#">Item 7</a></li>
                            <li><a href="#">Item 8</a></li>
                            <li><a href="#">Item 9</a></li>
                            <li><a href="#">Item 10</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-fw fa-tasks"></i> Processes</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-fw fa-file"></i> Filing </a>
                    </li>
                    <li>
                        <a asp-controller="MyProfile" asp-action="Index">
                            <i class="fa fa-fw fa-user"></i> My Profile
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="col-lg-10 col-md-9 col-sm-4 col-xs-6">
            @RenderBody()
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $(".dropdown-toggle").click(function () {
                $(".caret").removeClass('rotate-180');
                $(this).find(".caret").addClass('rotate-180');
            });
            $(document).mouseup(function (e) {
                $(".caret").removeClass('rotate-180');
            });
        });
    </script>
    @RenderSection("Scripts", required: false)
</body>
</html>

CSS CSS

body {
    position: relative;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

body, html {
    height: var(--full-height);
    background-color: var(--bg-color)
}

/********************************************
/*                                          *
/*                                          *
/*               Variables                  *
/*                                          *
/*                                          *
********************************************/

:root {
    /* BACKGROUND COLOUR */
    --bg-color: #FFF;

    /* HIGHLIGHT COLOUR */
    --highlight-color: #ff5c16;

    /* WIDTH */
    --width1: 16.67%;
    --full-width: 100%;

    /* HEIGHT */
    --full-height: 100%;

    /* Sidebar Font Size*/
    --sidebar-fontsize: 16px;
}

/********************************************
/*                                          *
/*                                          *
/*                Wrappers                  *
/*                                          *
/*                                          *
********************************************/

.container-fluid {
    padding: 0;
    margin: 0;
    height: 100%;
}

/********************************************
/*                  Header                  *
********************************************/

.headerWrapper {
    height: 7%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.headerWrapper > h1 {
    padding: 0;
    margin: 0;
    font-size: 18px;
}

/********************************************
/*                  Content                 *
********************************************/

.contentWrapper {
    height: 93%;
    width: 100%;
    padding: 0;
    margin: 0;
}

/********************************************
/*                  Sidebar                 *
********************************************/

#sidebar-wrapper {
    width: var(--width1);
}

#sidebar-wrapper {
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background-color: #1A1A1A;
    height: var(--full-height);
    overflow-x: hidden;
    overflow-y: auto;
    transition: all 0.5s ease;
}

#sidebar-wrapper::-webkit-scrollbar {
    display: none;
}

/********************************************
/*                                          *
/*                                          *
/*             Sidebar Styling              *
/*                                          *
/*                                          *
********************************************/

/*.sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
}*/

.sidebar-nav .sidebar-brand:before {
    background-color: #222222;
    color: #FFF;
}

.sidebar-nav .sidebar-brand > a {
    color: #FFF;
    font-size: 24px;
    line-height: 60px;
}

.sidebar-nav .sidebar-brand a:hover {
    background-color: #222222;
}

.sidebar-nav > li > a {
    line-height: 20px;
    color: #DDD;
    padding: 10px 15px 10px 30px;
    font-size: var(--sidebar-fontsize);
}

.sidebar-nav > li:before {
    width: 3px;
    height: var(--full-height);
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--highlight-color);
    transition: width .2s ease-in;
    content: '';
}

.sidebar-nav > li:hover:before {
    transition: width .2s ease-in;
    width: var(--full-width);
}

.sidebar-nav > li.open:hover before {
    transition: width .2s ease-in;
    width: var(--full-width);
}

.sidebar-nav .dropdown-menu {
    background-color: #222222;
    border-radius: 0;
    border: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: var(--full-width);
}

.sidebar-nav .dropdown-toggle > .caret {
    float: right;
    margin: 6px 0;
}

.sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus,
.sidebar-nav li.open a:active, .sidebar-nav li.open a:active, .sidebar-nav li.open a:active,
.sidebar-nav .open > a:hover, .sidebar-nav .open > a:focus {
    background-color: transparent;
    color: #FFF;
    text-decoration: none;
}

.nav .open > a {
    background-color: transparent;
}

.nav .open > a:hover, .nav .open > a:focus {
    background-color: transparent;
}

.caret {
    -moz-transition: transform 0.5s;
    -webkit-transition: transform 0.5s;
    transition: transform 0.5s;
}

.rotate-180 {
    transform: rotate(-180deg);
}

Image working in Chrome: 在Chrome中运行的图片：

But completely different and no hover effect in IE11: 但完全不同，在IE11中没有悬停效果：

I am using Bootstrap but I was under the impression that forcing it into Edge compatibility should fix any issues I may have. 我正在使用Bootstrap，但给人的印象是，将其强制为Edge兼容性应该可以解决我可能遇到的所有问题。

Answer 1

CSS custom properties (which you are using to define your variables) are not supported by any version of Internet Explorer, and as far as I know, there is no way to polyfill this functionality. 任何版本的Internet Explorer都不支持CSS自定义属性（用于定义变量的自定义属性），据我所知，还没有办法实现这种功能。

You will have to refactor your CSS to not use them if you want to support IE. 如果要支持IE，则必须重构CSS以不使用它们。 Perhaps consider using a compile-to-CSS language that supports variables, like Sass or Less. 也许考虑使用支持变量的SCSS或Less之类的CSS编译语言。

网站与IE11不兼容，在Chrome中可以正常运行

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-11-15 11:26:20

网站与IE11不兼容，在Chrome中可以正常运行

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-11-15 11:26:20

解决方案1
1 已采纳 2017-11-15 11:26:20