Question

以下代码段在Chrome中运行良好，但在IE11或Edge中无法正常显示。 navbar固定在顶部，而不是与侧面对齐，悬停效果不起作用。

我确保我宣布; <!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">

即便这样做，显示仍然搞砸了。我在IE中进入开发者工具，但也找不到任何问题。

我的代码：

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

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);
}

在Chrome中运行的图片：

但在IE11中完全不同且没有悬停效果：

我正在使用Bootstrap，但我认为强制它进入Edge兼容性会解决我可能遇到的任何问题。

Answer 1

CSS custom properties（用于定义变量）不受任何版本的Internet Explorer支持，据我所知，没有办法填充此功能

如果你想支持IE，你将不得不重构你的CSS而不使用它们。也许考虑使用支持变量的编译到CSS语言，如Sass或Less。

网站与IE11不兼容，Chrome浏览量不错

1 个答案: