web-dev-qa-db-fra.com

Bootstrap 4 IE 11 ne fonctionne pas

le problème est que mon site Web entier ne fonctionne pas dans IE 11. Je ne comprends pas pourquoi, car officiellement IE 11 devrait être pris en charge par bootstrap 4 ... .ergotherapie-klinkicht.de Je suis un peu impuissant en ce moment, parce que je ne sais pas par où commencer. Ai-je oublié quelque chose que IE 11 puisse inclure dans mon code?

Sous Firefox, Edge, Chrome et Safari, cela fonctionne très bien ...

Parce qu’à l’heure actuelle, j’ai le sentiment que bootstrap 4 n’est pas du tout compatible avec IE 11 ...

Merci pour toute réponse!

c'est ma barre de navigation par exemple, elle n'est pas visible dans 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>
cssinternet-explorersassinternet-explorer-11twitter-bootstrap-4
7
Lisa

Publier au cas où cela pourrait aider quelqu'un d'autre. J'ai rencontré le même problème: tout fonctionnait parfaitement dans Chrome, mais dans IE11, il ne pouvait voir aucun code CSS. Je suis tombé sur ce post mais ça n'a pas aidé. Après plus de recherches, j'ai trouvé une suggestion d'ajouter ce qui suit dans la balise HEAD et cela a fonctionné. Je pensais poster ici car c'est l'un des premiers sujets de recherche Google. 

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

Dans IE, il est nécessaire de définir explicitement la hauteur et la largeur, sinon cela se brise.

Donc, le width: auto pourrait causer un problème. auto me donne beaucoup de problèmes. Peut-être essayer

3
Kaune

J'ai eu un problème d'affichage avec IE11 lors de l'utilisation de la classe .card-deck J'ai résolu le problème en ajoutant

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

J'espère que ça aide quelqu'un :)

1
flashy