Bootstrap-4 IE 11 funktioniert nicht
also ich habe das problem, dass meine gesamte website funktioniert nicht im IE 11. Ich verstehe nicht, warum da offiziell IE 11 sollte unterstützt werden durch bootstrap-4...
Website: www.ergotherapie-klinkicht.de
Ich bin ein bisschen hilflos jetzt, denn ich weiß nicht, wo zu beginnen. Hab ich was verpasst für den IE 11 zu zählen, die in meinem code?
In Firefox , Edge, Chrome und Safari funktioniert es Prima...
Weil jetzt, ich habe das Gefühl, dass die bootstrap-4 ist nicht kompatibel zum IE 11 überhaupt...
Vielen Dank für jede Antwort!
dies ist meine navbar zum Beispiel, es ist nicht sichtbar im 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-DztdAPBWPRXSA/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>
Für mich funktioniert im IE11, vielleicht Strg + f5?
Haben Sie schaute auf die F12-Developer-Tools für Fehler? Das habe ich getan, passiert ist zu bemerken, dass es war, beschwerte sich über Jquery 3.2.1 schlank. Ich tauschte sich die 'slim' - version für die Vollversion. Ich hatte mehrere Probleme, die (Winkel-polyfill-bezogen) es war also nicht das einzige, was ich benötigt zu tun, aber es könnte helfen?
Haben Sie schaute auf die F12-Developer-Tools für Fehler? Das habe ich getan, passiert ist zu bemerken, dass es war, beschwerte sich über Jquery 3.2.1 schlank. Ich tauschte sich die 'slim' - version für die Vollversion. Ich hatte mehrere Probleme, die (Winkel-polyfill-bezogen) es war also nicht das einzige, was ich benötigt zu tun, aber es könnte helfen?
InformationsquelleAutor Lisa | 2017-09-30
Du musst angemeldet sein, um einen Kommentar abzugeben.
Buchung nur in diesem Fall könnte jemand anderes helfen. Ich lief in das gleiche Problem wo alles lief gut im Chrom, aber in IE11 es war wie er konnte nicht sehen, jede CSS-Dateien. Ich stieß auf dieses post, aber es hat nicht geholfen. Nach suchen fand ich einen Vorschlag, fügen Sie Folgendes in den HEAD-tag und es funktionierte. Dachte, ich würde hier posten, da dies einer der ersten threads, der kommt in einer Google-Suche.
Sah alte Dokumentation, die mit diesem tag erforderlich war, und hier gelandet bei der Suche, um herauszufinden, ob Bootstrap-4 muss noch diese Zeile...
Bestätigt! hat den trick, eigentlich ist es auch meine Feste VueJs Probleme!
Duh! Danke Mann! Unsere PCs bei der Arbeit haben eine Richtlinie in IE11 zu Rendern aller intranet-Seiten im "Kompatibilitätsmodus". Ich habe ganz vergessen...
InformationsquelleAutor Caverman
Im IE, die Höhe und Breite müssen explizit festgelegt werden, oder es bricht.
Also die
width: auto
ein problem verursachen könnte.auto
gibt mir eine Menge Probleme. Vielleicht probierenInformationsquelleAutor Kaune
Hatte ich ein Problem mit IE11 bei der Verwendung der Klasse .Karte-deck
Ich wurde dieser durch Zugabe von
Hoffe das hilft jemandem 🙂
InformationsquelleAutor flashy