I am facing an issue where my entire website is not functioning properly in IE 11. Despite the fact that Bootstrap 4 should officially support IE 11, I'm unsure of what the problem might be. Website: www.ergotherapie-klinkicht.de I feel a bit lost at the moment as I don't know where to begin troubleshooting. Could it be that I missed something in my code that's required for IE 11 compatibility?
Interestingly, the website works perfectly fine in Firefox, Edge, Chrome, and Safari...
At this point, I've started to suspect that Bootstrap 4 might not be compatible with IE 11 at all...
Thank you in advance for any responses!
For instance, here is my navbar which isn't visible in IE 11:
#logonav {
height: 40px;
width: auto;
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: #2E8B57;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item .nav-link .active,
.navbar-custom .nav-item:hover .nav-link {
color: orangered;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: #2E8B57;
}
.custom-toggler.navbar-toggler {
border-color: rgb(46,139,87);
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(46, 139, 87, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8>"
<!-- IE Edge Meta Tag -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous">
<link rel="stylesheet" href="ergo.css">
<title>Bettina Klinkicht Ergotherapeutische Praxis Bonn</title>
<link rel="shortcut icon" type="image/x-icon" class="img-circle" href="logopur.png">
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-107069424-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments) };
gtag('js', new Date());
gtag('config', 'UA-107069424-1');
</script>
</head>
<body>
<nav class="navbar navbar-inverse fixed-top transparent navbar-toggleable-sm navbar-custom">
<div class="navbar-inner">
<!-- Brand and toggle grouped for better mobile display -->
<button class="navbar-toggler navbar-toggler-right custom-toggler" type="button" data-toggle="collapse" data-target="#navmobile"
aria-controls="navmobile" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="home.html" class="navbar-brand"><img src="logopur_neu.png" alt="Logo" id="logonav"></a>
</div>
<!-- Collect nav-links for toggling-->
<div class="collapse navbar-collapse" id="navmobile">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="Therapeutin.html">Über mich</a>
<div class="dropdown">
<a class="nav-item nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="servicesDropdown" aria-haspopup="true" aria-expanded="false">Angebot</a>
<div class="dropdown-menu" aria-labelledby="servicesDropdown">
<a class="dropdown-item" href="Geriatrie.html">Geriatrie</a>
<a class="dropdown-item" href="Neurologie.html">Neurologie</a>
<a class="dropdown-item" href="Spiegeltherapie.html">Spiegeltherapie</a>
<a class="dropdown-item" href="Schwindeltherapie.html">Schwindeltherapie</a>
<a class="dropdown-item" href="Biographiearbeit.html">Biographiearbeit</a>
<a class="dropdown-item" href="Brain_Gym.html">Brain Gym</a>
<a class="dropdown-item" href="Sensibilitaetstraining.html">Sensibilitätstraining</a>
<a class="dropdown-item" href="Gleichgewichtstraining.html">Gleichgewichtstraining</a>
</div>
</div>
<a class="nav-item nav-link" href="Kontakt.html">Kontakt</a>
</div>
</div>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMQp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXF/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
<script src="ergo.js"></script>
</body>
</html>