wake-up-neo.net

Bootstrap 4 IE 11 funktioniert nicht

ich habe also das Problem, dass meine gesamte Website in IE 11 nicht funktioniert. Ich verstehe nicht, warum IE 11 offiziell von bootstrap 4 ....__ unterstützt wird .ergotherapie-klinkicht.de Ich bin im Moment etwas hilflos, weil ich nicht weiß, wo ich anfangen soll. Habe ich etwas für IE 11 verpasst, um meinen Code einzufügen?

In Firefox, Edge, Chrome und Safari funktioniert es einfach gut ...

Denn im Moment habe ich das Gefühl, dass Bootstrap 4 überhaupt nicht für IE 11 kompatibel ist ...

Danke für jede Antwort!

dies ist meine Navigationsleiste zum Beispiel, sie ist in IE 11 nicht sichtbar:

#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>
7
Lisa

Posting nur für den Fall, dass dies jemandem helfen könnte. Ich stieß auf das gleiche Problem, bei dem in Chrome alles einwandfrei lief, in IE11 jedoch so, als würde es kein CSS sehen. Ich bin auf diesen Beitrag gestoßen, aber es hat nicht geholfen. Nach längerer Suche fand ich einen Vorschlag, das Folgende im HEAD -Tag hinzuzufügen, und es funktionierte. Ich würde hier posten, da dies einer der ersten Threads ist, die bei einer Google-Suche auftauchen. 

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
14
Caverman

Im IE müssen die Höhe und Breite explizit festgelegt werden, oder es bricht.

Der width: auto könnte also ein Problem verursachen. auto gibt mir viele Probleme. Vielleicht probieren Sie es aus

3
Kaune

Ich hatte ein Anzeigeproblem mit IE11 bei Verwendung der Klasse .card-deck Dieses Problem wurde durch Hinzufügen behoben

.card-deck {
    width: 100% !important;
}

Hoffe das hilft jemandem :)

1
flashy

Ich hatte das gleiche problem Sie müssen alle Meta- und Link-Tags in Ihrem Kopf mit einem /> schließen.

0
user2676091