html - 网站不兼容 IE11，在 Chrome 中正常-6ren

html - 网站不兼容 IE11，在 Chrome 中正常

转载作者：太空宇宙更新时间：2023-11-04 07:56:14

以下代码片段在 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/

文章推荐： c - 一种将标准输出输出到屏幕和文件的方法？

文章推荐： c - 从 timerfd 读取()时参数无效

文章推荐： c - 为什么我需要在我的循环条件中包含 EOF？

文章推荐： java - 从 Java 调用具有输入和输出重定向的 C 可执行文件

firefox - 升级插件以与 Firefox 4.0 兼容，但也尝试使其与 3.x 兼容。建议？
我有一个为 Firefox 3.6 编写的附加组件，现在我正在将其升级到 Firefox 4.0，同时尝试使其与 3.6 兼容。有没有人有尝试这样做的经验，或者关于如何在代码变得太意大利面条式的情况下
cassandra - 哪个版本的 Astyanax 与 Cassandra 2.0.1 兼容，或者哪些其他 Java 驱动程序与 Cassandra 2.0.1 兼容
我已经安装了 Cassandra 2.0.1 并想在我的应用程序中使用 Astyanax Java API。我在维基上看到了 Cassandra 兼容性表，上面写着 Astyanax 使用 Netfl
vbscript - 如何使我的自定义类与 For Each 兼容？
是否可以使纯粹在 VBScript(无 COM 对象)中实现的自定义容器类与 For Each 语句一起使用？如果是这样，我必须公开哪些方法？最佳答案简而言之，没有为什么？创建一个可枚举的集合类
java - 与哪些变量运算符 >> 兼容
我这里的代码很少 int b=3; b=b >> 1; System.out.println(b); 它工作得很好，但是当我将变量 b 更改为 byte、short、float、double 时它包含
兼容 Java 类名
我们有一个 Java 客户端，它使用 corba 调用多个第三方系统。这些是实现同一组接口(interface)的不同系统。我们获得了使用这些接口(interface)的库(jar 文件)。例如，这些
HTML5 兼容 - 类属性中的尾随空格
我知道从技术上讲 HTML5 是一个“实时规范”，但我想知道它是否符合在类名中添加尾随空格的规定。我没有在规范中看到任何对这种情况的引用，但我的一个队友说它是无效的。也许我错过了什么？修剪这些空间会
multithreading - 使克隆的线程 pthread 兼容
我在 Linux x86-64 上用 C 语言编程。我正在使用一个库，它通过原始 clone 创建多个线程系统调用而不是使用 pthread_create .这些线程运行库内部的低级代码。我想钩住这
assembly - 汇编程序中的低级网络(兼容 x86)
我希望用汇编程序编写一个可启动程序，能够发送和接收网络数据包。我不想使用任何库，我想自己创建它(并在这样做的同时学习)。不幸的是，我无法找到有关最低级别的网卡通信(发送原始套接字)的任何信息。我相信有
具有固定范围的 CoffeeScript 兼容 fork ？
是否有除 fixed scoping 之外没有任何更改的 CoffeeScript 分支，以便它在很大程度上与 CoffeeScript 兼容(如果代码没有外部变量赋值则完全兼容)？我会考虑使用可接受
java - 为什么方法引用与具有不同参数数量的功能接口(interface)兼容？
这个问题已经有答案了: Why is BiConsumer allowed to be assigned with a function that only accepts a single para
java - 兼容 JDBC 的主存独立数据库
我的 Java 应用程序需要一个高性能主内存数据库 1] 请建议数据库 -符合 JDBC -独立(即平面文件) -支持内存表 -高性能 -B-TREE索引 2] JAVA中是否有任何技术可以在程序运行
c++ - 如何使std::string与char *兼容？
我通常会找到一些以char*作为参数的函数，但是我听说在C++中更推荐std::string。如何将std::string对象与以char* s为参数的函数一起使用？到目前为止，我已经知道了c_str
javascript - 如何使这个模块与 requireJS 兼容
我正在移植我的一个旧 javascript 文件以与 requireJS 兼容。这是以前代码的样子。 // effect.js (function(exports){ // shorthand
android - 如何使我的项目与 getMapAsync 兼容？
在今天更新我的 SDK 之前，我有工作代码(为了将来引用，请查看问题询问日期)。 .getMap 曾经发出警告，表明它已被弃用，但现在它甚至不被识别为有效输入。我假设这是因为 API 24(Andro
POSIX 兼容 shell 中的数组
根据 this reference sheet on hyperpolyglot.org , 下面的语法可以用来设置一个数组。 i=(1 2 3) 但是我在 dash 上遇到错误，它是 Ubuntu
mysql - 无效模式--兼容 : mysql40
我的 MacBook 上安装了 MYSQL 8.0.12(下载版本)。当我尝试转储 mysql40 的兼容版本时，收到错误 Invalid mode to --known: mysql40。我 100
testing - 哪些版本控制软件与 remedy 兼容？
您好，我正在更改我的版本控制系统，我调查了 perforce 是否与 bcm 补救措施兼容。有谁知道其他版本的控制系统也与 bcm 补救措施兼容？？最佳答案 BMC Remedy 会更接近 Clea
python - 兼容 Numpy 的图像绘图库
我需要在 python 中的图像上绘制一般坐标网格。我可以计算网格线的像素坐标，因此我只需要一个能够将它们绘制为图像顶部的虚线的模块。图像以 numpy 数组的形式出现，因此我需要能够在这些格式和绘
python - 使文件处理代码与 asyncio 兼容
库接受文件输入的“传统”方式是做这样的事情: def foo(file_obj): data = file_obj.read() # Do other things here 客户端代
css - 我怎样才能使以下代码与 IE6 兼容？
代码 Untitled Document #topDropDownMenu { position: relative;

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 网站不兼容 IE11，在 Chrome 中正常