28172 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement d'un ::before sous IE(11)

Bonjour,

J'ai fabriqué une class .emphasized qui crée un soulignement de part et d'autre d'un titre <h1> ou <h2> :
upload/35007-Capturedan.jpg

Aucun problème d'affichage sur les navigateurs... sauf sur IE11 (et inférieur) le pseudo élément ::before n'apparait pas :
upload/35007-image.png

À l'heure actuelle je sèche toujours...

Le Pen : Emphasized Title.

Une idée ?
Modifié par Olivier C (09 Jun 2015 - 11:39)
Modérateur
Salut,

c'est le margin-left: -102%; qui te met dedans. Sous IE ton before est out of the box et overflow hidden fait son boulot. Avec un margin-left: -60%; le before revient dans le champ mais ça pète sous les autres navigateurs... Smiley ravi

[EDIT] Et pour l'histoire je suis tombé sur un vieux "T'es pas cap" (1ère deition) de Raphaël Goetter dans les archives Tumblr de son blog : http://goetter.fr/tumblr-backup/ -> ctrl+f de [ Posted Mon, 19 Nov 2012 21:55:00 ] ou de ["T'es pas cap !" (première édition)]
Modifié par _laurent (10 Sep 2014 - 13:25)
_laurent a écrit :
Et pour l'histoire je suis tombé sur un vieux "T'es pas cap" (1ère deition) de Raphaël Goetter dans les archives Tumblr de son blog...

Oui. C'est ce tutoriel qui, à l'époque, m'avait inspiré pour créer cette classe.
_laurent a écrit :
c'est le margin-left: -102%; qui te met dedans. Sous IE ton before est out of the box et overflow hidden fait son boulot. Avec un margin-left: -60%; le before revient dans le champ mais ça pète sous les autres navigateurs...

Eh oui, j'ai bien pensé à cela, mais je cherche une solution "all browsers". Si quelqu'un connait une astuce... parce que là, je suis à sec. Smiley sweatdrop
Je n'ai pas retenu la solution de Goetter car elle manquait de souplesse : il faut nécessairement ajouter des balises <br> pour voir le titre décliner sur plusieurs lignes. Impensable pour un design prévu pour un contexte CMS, et sa solution n'est pas responsive non plus.

Quand à la solution d'Hugo Giraudel, il fallait un contexte de formatage sur l'élément parent. Pour l'emploi d'une classe optionnelle sur un titre... je dis non.
Une tentative (avec un hack pour IE10-11) :
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */
    [class^="emphasized"]::before {
        margin-left: -76%;
    }
}

Malheureusement, cette solution ne fonctionne qu'au cas par cas...
Modifié par Olivier C (09 Jun 2015 - 11:40)
Pas possible ! En inline-block... mais comment n'y ai-je pas pensé plus tôt ! Ta solution semble fonctionner parfaitement sur IE (pour mes besoins j'ai testé à partir d'IE9 mais ça doit normalement fonctionner à partir d'IE8) :
upload/35007-inline-blo.jpg

Un grand merci à toi car il y a longtemps que je cherchais la solution. Sujet enfin résolu.
Modifié par Olivier C (11 Jun 2015 - 04:36)
Sujet clos
Aller à