以下代码片段在 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 兼容应该可以解决我可能遇到的任何问题。
最佳答案
CSS custom properties (您用来定义变量的)任何版本的 Internet Explorer 都不支持，据我所知，没有办法填充此功能。
如果您想支持 IE，您将不得不重构您的 CSS 以不使用它们。或许可以考虑使用支持变量的编译为 CSS 的语言，例如 Sass 或 Less。
关于html - 网站不兼容 IE11，在 Chrome 中正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47306009/