javascript - 不要在 IE 中使用 Bootstrap 显示网站

Question

我在我的网站上使用 Bootstrap 和 Vuejs 和 Laravel 。 chrome 和 firefox 上的一切都很好，但是当我使用 IE 时，显示空白页面没有任何错误。 当我禁用 bootstrap Css(不是 bootstrap 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

问候

Answer 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>