[Résolu] PrefixMyBrain ... Flexbox + IE 11

Bonjour,

Je pensais que ceci marcherait sous IE mais même la version 11 n'en veut pas.

Qu'est ce que je n'ai pas compris dans l'affaire ?

(je précise que je veux faire un trait gris (avt/après) sur des titres sur lesquels je ne peux rajouter d'élément)

https://jsfiddle.net/mmci/aecoaqwy/3/

<h1>Un titre</h1>

  h1{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}
h1:before, h1:after{
    background-color: #eaeaea;
    content: "\a0";
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
            flex-grow: 1;
    height: 5px;
    position: relative;
    top: 0.6em;
}
h1:before{
    margin-right: 15px;
}
h1:after{
    margin-left: 15px;
}

Merci d'avance
Modifié par Manhattan (08 Jun 2015 - 18:35)

Ah ! Je vais suivre ce sujet.

En effet : j'avais fait la même chose avec display:table, ça marchait avec tous les navigateurs sauf IE.

Le Pen : Emphasized Title.
Modifié par Olivier C (09 Jun 2015 - 09:07)

C'est bon : j'ai revu ma solution qui marche à partir de IE10 avec un hack pour ce navigateur : Emphasized Title.
Modifié par Olivier C (12 Jun 2015 - 16:15)

Bonjour,

Quel est le hack, parce que sous IE11 je n'ai pas le même affichage :
chrome au dessus IE11 au dessous (W8.1)

Mince... Mon problème, c'est que je n'ai pas IE car je suis sous Mac. J'ai testé avec des captures d'écrans en ligne mais je n'ai pas encore réellement testé sous IE. Le hack :

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */
    [class^="emphasized"]::before {
        margin-left: -76%; /* Il faut effectuer le réglage sur le pourcentage ici */
    }
}

Modifié par Olivier C (09 Jun 2015 - 10:16)

D'acc...
Mais s'il faut faire un réglage en fonction du titre (qui peut changer), je préfère à la rigueur me diriger vers de la création d'élément via JS juste pour les traits qui sont de toute façon annexe.
A moins qu'une autre tête passe dans le coin et trouve pourquoi Flex ne marche pas sous IE11... Saint Raphaël si tu nous entend...

Manhattan a écrit :
Saint Raphaël si tu nous entend...

La solution qu'il avait donné dans mon lien plus haut (mais qui commence à dater), elle est ici : CodePen.
Mais elle ne marche que sur un titre d'une seule ligne...

C'est bon : grâce à un passage de gc-nomade, la solution que j'évoquais fonctionne désormais sans hack et avec du texte en multilignes : Positionnement d'un ::before sous IE.