不要在 IE 中显示带有 Bootstrap 的网站答案

【问题标题】：Do not Show Website With Bootstrap in IE不要在 IE 中显示带有 Bootstrap 的网站
【发布时间】：2018-07-02 13:06:48
【问题描述】：

我在我的网站上使用Bootstrap 和Vuejs 和Laravel。 chrome 和 firefox 上的一切都很好，但是当我使用 IE 时，空白页显示没有任何错误。当我禁用引导 Css（不是引导 js）时，一切都会好起来的。我在 IE 11 上测试过。我为发送给您的 IE 的检查元素和控制台的几乎每个部分拍了几张照片。

first part of inspect elment

second part of inspect element

third part of inspect element

last part of inspect element

console IE

问候

【问题讨论】：

您使用的是哪个版本的引导程序？
这与几小时前有人问的问题完全相同。如果你没有答案，可能是因为你问的方式不好。代码好，代码截图不好。
我使用 bootstrap 3.3.7 但我将 bootstrap 版本更改为 3.35 和 3.2.0 ，无法更改
bootstrap.css 不太可能隐藏整个页面内容，即使在 IE 上也是如此。然而，你没有给我们任何引导版本或要检查的源代码，所以很难说。

标签： javascript html css twitter-bootstrap-3 vuejs2

【解决方案1】：

必须有一种更清洁的解决方案，但这是我的意见。

我使用.disabled 属性在Javascript 中禁用link。

代码首先检查您是否使用IE 并相应地禁用。

用link 索引找到你的bootstrap.min.css。

// disables all styles in the document
function unloadStyleSheet(DOMelement) {
    DOMelement.disabled = true;
    DOMelement.parentNode.removeChild(DOMelement);
}

// Sample function that returns boolean in case the browser is Internet Explorer
function isIE() {
    ua = navigator.userAgent;
    // MSIE used to detect old browsers and Trident used to newer ones
    var is_ie = ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;

    return is_ie;
}

// Disable CSS if IE
if (isIE()) {
    console.log(document.getElementsByTagName('link')[0]);
    unloadStyleSheet(document.getElementsByTagName('link')[0]);
} else {
  // Remove comments if you want to test in chrome
  //unloadStyleSheet(document.getElementsByTagName('link')[0]);
}

.container {
    border: 1px solid;
}

[class^='col-'] {
	border: 1px dashed;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-md-12">Hey</div>
    </div>
    <div class="row">
        <div class="col-md-12">Hey</div>
    </div>
    <div class="row">
        <div class="col-md-12">Hey</div>
    </div>
    <div class="row">
        <div class="col-md-12">Hey</div>
    </div>
</div>

【讨论】：