Compatibilité Bootstrap et Internet Explorer

Salut,

Déjà, as-tu pris la peine de regarder le browser support sur leur site http://getbootstrap.com/getting-started/#support ?

De plus, ton div ayant la classe _.container ne peut pas avoir les classes col-xx-xx et col-xx-offset-xx sans avoir un row en parent, d'autant plus que le .container_ est une classe Bootstrap permettant de wrapper un contenu http://getbootstrap.com/css/#overview-container.

Enfin, il te manque les balises meta dans ton code http://getbootstrap.com/css/#overview-mobile.

Bref, as-tu au moins lu la doc avant de venir poster ici ?

Oui, j'ai lu la doc. Enfin, j'ai essayé. Certainement très mal, et j'ai du rater un truc. Voire même plusieurs. Je ne suis pas expert en Bootstrap, je débute ; mais si j'ai besoin de me perfectionner en anglais, je saurai quoi lire pendant mes longues soirées d'hiver ! Et je vais l'apprendre par coeur (j'ai que ça à faire), ça m'évitera de me faire envoyer ch... dans les forums !

Apparemment, la classe container ne pose pas de problème, c'est bien la seule chose qui marche, d'ailleurs. Les modifs dont tu parles n'ont rien changé. J'ai toujours la police Times New Roman sur Internet Explorer, aucun formattage du page-header, de la balise blockquote, etc. Quant aux marges de mon .container, je n'en parle même pas !

Quant aux renvois que tu me donnes sur la doc, je suis encore dans le flou, parce que je ne retrouve pas les éléments que j'ai utilisés dans mon code (à part le box-shadow, mais ça, je n'en tiens même pas compte)... Mais je dois avoir des problèmes de lecture...

Mais je vais continuer de chercher dans la doc, ça m'occupera.
Merci d'avoir "pris la peine" de me répondre.

Salut @Markos ,
je suis sûr que @betaWeb ne voulait pas te vexer, au contraire :) .

En ce qui concerne les erreurs que tu rencontres, est-ce que tu peux accéder à la console de développeur d'internet explorer?

Si non, pour qu'on puisse comprendre un peu mieux ton problème, est-ce que tu pourrais créer un code un peu plus d'exemple? Genre uniquement avec quelques divs Bootstrap afin que l'on puisse reproduire les problèmes assez simplement? Le top serait même que tu puisses héberger une page html quelque part pour que l'on puisse tester tout ça.

Bonne journée, et peace sur le monde :)

J'ai posté l'intégralité de mon code (il y a juste du vrai texte à la place du Lorem Ipsum, et quelques noms que j'ai anonymé). Il n'y a rien de plus.

J'ai bien accès aux outils de développement d'IE.

Pardon pour mon coup de gueule, mais le genre de réponse que j'ai reçue de @betaWeb, j'en reçois presque à chaque fois, et y'a un moment, c'est trop. Le problème vient certainement de moi. Je vais arrêter de polluer les forums avec mes questions cons, et je vais essayer de me former plus solidement tout seul (ce n'est pas facile). Ou bien je resterai avec mes problèmes...

J'ai pensé à un truc : je crois que les nouvelles balises de CSS3 ne sont pas reconnues par IE. Je dois pouvoir trouver un petit code JavaScript quelque part pour y remédier... C'est vrai que j'ai mis des balises "<section>" qui ne sont peut-être pas identifiées.... Je vais essayer de voir et je vous tiens au courant.

Merci,
A+

Résultat : j'ai essayé le script dont j'ai parlé : il s'agit de

document.createElement("section");

Ca n'a aucun effet. Aucun changement. Je vais continuer de chercher.
Les problèmes rencontrés peuvent certainement être résolus par des CSS spécifiques pour IE (commentaires conditionnels), bref, il y a certainement des solutions.

Ce qui m'étonne, c'est que Bootstrap ne soit pas compatible avec IE. Mais je vais essayer de comprendre ce qu'en dit la Sainte Doc.

Merci à tous, et pardon encore pour le dérangement.

Je n'ai fait que te donner des pistes, d'autant plus que tout dev qui se respecte se doit de savoir que IE c'est pas terrible.
Maintenant, pour savoir ce que tu peux utiliser et avec quel browser, je t'invite à regarder du côté de http://caniuse.com/.
Pour ce qui est de la balise section, celle-ci n'est pas compatible IE < 9 (http://caniuse.com/#search=section).

Quant à ta façon de demander les choses, effectivement ce n'est pas idéal car, en gros, tu dis "Ca marche pas, voilà mon code, dites-moi pourquoi.". Mais ce n'est que mon humble (ou pas) avis.

@betaWeb,
Je suis sans doute maladroit, mais il va de soi que si je poste une question sur un forum, c'est que j'ai été voir sur la doc, sur les forums et sur internet en général.

Je ne vois pas trop comment tu voudrais que je pose la question. J'ai énoncé dès le début ma réflexion : "je croyais que Bootstrap était compatible avec tous les navigateurs". Or, ça ne marche pas (je sais que IE est une merde, mais quand on code, on le fait pour tout le monde, et ça aussi c'est une question d'humilité). J'ai cherché des réponses à cette question sur d'autres sites, et je n'ai rien trouvé. Je pose la question de la façon la plus simple et courtoise possible. Si je n'avais pas posté mon code, tu me l'aurais aussi reproché. Et tu aurais eu raison. Vraiment, je ne vois pas ce qu'il y a dans ma façon de demander les choses. J'ai dit "Bonjour" et "Merci d'avance". Qu'attendais-tu ?

Salut,

dans un premier temps, tu peux déjà essayer de remplacer tes section par des div. Parce que normalement, Bootstrap est effectivement compatible avec Internet Explorer 9.

Du coup, est-ce que les outils de développement d'IE t'indiquent des erreurs?

En ce qui concerne le code que tu as posté, personellement, c'est juste qu'il y avait des images que je n'ai pas en local qui m'a dérangé, et qui m'a peut-être un peu freiné pour tester ton code :)

Tu as raison, poser une question sur un forum devient de plus en plus difficile, parce que les gens qui répondent souvent (je ne me compte pas dedans) ont maintenant leurs Good Practices à eux, et c'est vrai qu'on s'en prend parfois plein la gueule quand on respecte pas toutes ces règles... Mais c'est comme d'habitude, il faut essayer de se mettre à la place de l'autre, des deux côtés :)

Le fait est que beaucoup trop de personnes viennent sur ce forum pour qu'on leur donne la solution sans même chercher. Tu n'as précisé nul part que tu avais effectué des recherches en amont.
De plus, je pense qu'avec un minimum de recherches tu aurais pu trouver des pistes sur stackoverflow (par exemple).
Maintenant j'ai essayé de t'en donner, des pistes, notamment dans ma dernière réponse. En as-tu tenu compte ?

betaWeb,
I also looked across Stackoverflow, but I couldn't find any topic about the same issue. Besides, they just answer the questions the same way you do, so it doesn't help much (technical terms, terse answers)... I am just an amateur. Et puis, disons les choses franchement, parfois l'anglais est indispensable quand on fait du développement, mais ça me gonfle.

C'est justement en cherchant dans les forums (comme stackoverflow mais pas que) que je me rends compte que tout le monde dit que Bootstrap s'adapte sans problème à tous les navigateurs, et que je vois que personne ne rencontre le même problème que moi. C'est visiblement tout bootstrap qui semble ne pas être reconnu. Je n'en suis que plus étonné.

El Matella, j'ai essayé de regarder la console des outils de développement d'Internet Explorer (je n'ai pas l'habitude d'utiliser ce navigateur, car chacun sait ce qu'il vaut...), j'ai même essayé de regarder la doc sur l'utilisation de la console, peut-être pas avec assez de patience ou d'attention, mais il semble que le navigateur ne rencontre aucun problème (pas de message d'erreur), il affiche juste mal la page.
Mais je ne sais peut-être pas bien utiliser tous les outils de débogage d'IE. Je vais tâcher de me documenter.

J'ai essayé de remplacer les balises section par des div, ça n'a rien changé. Apparemment, le problème ne vient pas de là. Les nouveautés CSS3 ne sont pas en cause.

Merci de votre patience.

betaWeb,
Je connais caniuse, il permet de savoir ce qui ne fonctionne pas bien sur tel ou tel navigateur. Je n'ai trouvé aucune mention de bootstrap. De plus, s'il existait un moyen de contourner les difficultés que je rencontre, cela ne ferait que confirmer qu'Internet Explorer est incompatible avec Bootstrap, et ce n'est pas ce qui semble ressortir de mes recherches. La première chose que j'ai apprise, en découvrant bootstrap, c'est qu'il convient à tous les navigateurs. Alors, ce que je cherche c'est plutôt : qu'est-ce qui cloche dans ma façon d'implémenter Bootstrap, et qui empêche IE de le prendre en compte ?

@Markos , bon du coup j'ai essayé ton code sur IE9, et voici ce que ça me donne:

Donc d'après moi, le "pull-right" fonctionne plutôt bien, est-ce que tu as des précisions sur ta version d'internet explorer?

@El_mattea Si tu utilise brackets , il existe une extension utile pour ajouter des photos "temporaires " à ton projet : Lorem picsum for brackets

@Markos j'ai testé ta page, @betaWeb à raison sur la class container ! tu utilise aussi mal la grid de bootstrap : elle se compose de 12 colonnes et j'ai vu que tu utilise un col-offset-2 avec un col-lg-8. ce qui résulte que tu n'obtient pas le même effet entre Chrome et IE (chrome étant plus tolérant sur les marges). Si tu corriges ces deux points je t'assure que c'est compatible Chrome, Firefox, IE ;) (et aucun problème de mon côté sur les font entre Chrome et IE)

@Markos et comme je suis bon prince , voici le code (ça te fera un exemple pour un autre projet):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Mon site photo</title>
    <!-- Latest compiled and minified CSS -->
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <link type="text/css" rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-offset-2 col-lg-10">

                <div class="page-header">
                    <h1>Mon site photo</h1>
                    <section class="row">
                        <div class="col-lg-12">
                            <blockquote>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere obcaecati consequuntur laudantium quam repellendus rerum autem nam voluptate a, cum, velit, aliquam nihil nobis voluptates in pariatur, eligendi corporis? Quaerat.</p>
                                <p>Consectetur provident omnis praesentium incidunt aliquid optio. Sequi saepe illum facilis blanditiis porro dolor ducimus ipsa, earum iusto dolores cumque, quibusdam sed dicta magni deleniti animi id officia veniam eaque.</p>
                                <p>Dicta sed, dolorum labore eligendi quis reprehenderit voluptatibus minus molestiae voluptatem at laborum recusandae laboriosam, facere eaque necessitatibus illo perferendis, quisquam modi eos! Quasi dolorum, nisi quod nihil aut odit.</p>
                                <p>Quam tempora necessitatibus nisi, deleniti, quidem rerum in. Sequi hic iure praesentium in nesciunt ipsum nam inventore! Non saepe ipsum, mollitia, omnis veniam similique molestiae accusantium sequi labore? Veniam, doloribus?</p>
                                <small class="pull-right">Truc Machin, photographe</small>
                            </blockquote>
                        </div>
                    </section>
                </div>
                <section class="row">
                    <img src=" http://lorempicsum.com/up/400/200/1" alt="" class="thumbnail">
                    <img src=" http://lorempicsum.com/up/400/200/1" alt="" class="thumbnail">
                    <img src=" http://lorempicsum.com/up/400/200/1" alt="" class="thumbnail">
                    <img src=" http://lorempicsum.com/up/400/200/1" alt="" class="thumbnail">
                    <img src=" http://lorempicsum.com/up/400/200/1" alt="" class="thumbnail">
                    <img src=" http://lorempicsum.com/up/400/200/1" alt="" class="thumbnail">
                    <img src=" http://lorempicsum.com/up/400/200/1" alt="" class="thumbnail">
                    <img src=" http://lorempicsum.com/up/400/200/1" alt="" class="thumbnail">

                </section>
            </div>
        </div>
    </div>

    <!-- jquery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>

</html>

Tu n'as plus qu'a centrer tous ça et si besoin redéfinir la largeur de ton container

@clamarque,
Il y a bien un problème de fond : j'ai copié-collé ton code et mon rendu sur Firefox est bien le même que le tien, mais sur IE9, j'ai le même problème qui persiste. D'un côté, soyons optimiste : cela signifie que mon site doit bien s'afficher normalement sur IE9 malgré le bug sur le mien. N'empêche... J'aimerais bien pouvoir tester normalement ma page sur Internet Explorer. Mais j'aimerais savoir d'où vient ce problème...

J'afficherais volontiers ici l'image de mon rendu à l'écran, mais je dois être complètement idiot : je ne comprends pas le système d'insertion d'image sur ce forum. J'ai cliqué sur l'icone ci-dessus, j'ai renseigné l'URI de l'image de ma copie écran ("C:/Users/Marc/Pictures/rendu-IE9.pjg") dans l'alerte qui s'affiche, mais mon image ne s'affiche pas. Je suis décidément très bête...

A+

@Markos, tu n'es pas complètement idiot, tu n'as juste pas l'air d'avoir beaucoup l'habitude. Pour poster une image, tu dois d'abord l'héberger, pour avoir une url du type http://unsite.fr/image.jpg. Tu trouveras des sites sur google qui hébèreront tes images et te fourniront un lien.

Bonsoir.
L'insertion d'image de l'éditeur du forum, ne télécharge pas ton image, il faut que tu mettes l'url d'une image qui est disponible en ligne et ne doit donc pas par conséquent, être un chemin local.

@Markos attention ! si tu copies colle, vérifie bien que le lien CSS est le même que chez toi (au niveau du head). Dans ton code tu avais mis ton fichier style.css dans un dossier css mais de mon coté, je l'ai mis directement à la racine .

@Markos : Je me permet de te donner plusieurs conseils :
1) Tu devrais prendre le "Basic Template" de Bootstrap fourni dans la documentation à l'adresse suivante : http://getbootstrap.com/getting-started/
2) Dans ce basic template tu as ce qu'il faut pour simuler les balises HTML 5 (comme section) pour les navigateurs ne les supportants pas.
3)Et peut etre le plus important, quand tu cherches à débeuguer ne cherche pas à le faire sur tout l'ensemble, mais vas y pas à pas.
Par exemple Test si ton conteainer est bien pris en compte pareil dans tous les navigateurs, si c'est le cas je passe à l'opération suivante et je créé mes colonnes voir si elles fontionnent sous les navigateurs et si c'est le cas j'y met mon style etc....

Comme je l'ai dit, le rendu sur Firefox est OK pour le code que j'ai copié-collé comme pour le mien. Le problème vient donc bien du navigateur et pas du code. C'est encore plus mystérieux.

J'ai essayé le basic template, ça ne change toujours rien. Ca ne m'étonne pas trop, puisque la page fonctionne bien sur vos postes, et sur Firefox. Je pense que mon IE a un truc bizarre, mais je n'arrive pas à trouver quoi...

J'ai testé la page sur Google Chrome et sur Firefox, et elle s'affiche correctement.

Je continue de chercher...
Merci à tous pour votre aide.

Voici mon rendu sur Internet Explorer (enfin, j'ai réussi) :

... et sur Firefox (ou Chrome) :

Avec mon fichier CSS, cela donne :

et sur Internet Explorer :

Après avoir fait quelques essais, il semble ressortir que la ligne suivante :

<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

donc, le CDN de bootstrap, n'est pas lu par Internet Explorer. En effet, lorsque je "commente" cette ligne, aucun changement dans IE, mais le navigateur Firefox me donne le même rendu que IE. Donc, le problème est que cette ligne n'est pas interprétée par IE.
Une idée ?
Merci pour votre aide (je crois qu'on avance. On va y arriver)

Salut,

Peut-être que IE bloque le script du fait que tu utilises le protocole https pour charger bootstrap et que Firefox l'accepte. Essaye de supprimer le https: pour commencer le href par //.

Tu peux regarder ce sujet sur Stackoverflow, il explique comment fonctionne ce principe: http://stackoverflow.com/questions/9646407/two-forward-slashes-in-a-url-src-href-attribute

Oui, bien essayé, @anthonydu89 ! Je viens de tester, ça ne marche pas non plus. Et je m'étonne que ça marche chez vous mais pas sur ma machine. Comme si le problème était un problème de configuration. Mais que diable dois-je "configurer" ?
Merci de ton aide.

Je viens de tester avec un IE9 sur une machine virtuelle (je suis sur mac) à partir du code proposé par @clamarque et tout s'affiche correctement chez moi.
Est ce que ton IE9 est de base ou tu testes avec un IE supérieur en émulant IE9 ?
Est ce que la console de IE t'indique une erreur quelque part ?
Que se passe-t-il si tu télécharges le fichier css du bootstrap et que tu le charges dans ta page sans passer par le CDN ?

Bonjour,
Je croyais avoir expliqué sur ce forum comment j'ai résolu le problème, mais je ne retrouve plus mon post. En espérant que cela pourra servir un jour à quelqu'un :
J'y ai quand même passé la nuit : Il fallait aller dans Outils > Options Internet >onglet "Avancé" et cocher la case TLS 1.0

qui a dû être décochée par inadvertance...
Merci à tous.

Bravo pour avoir trouvé ton erreur!