Bonjour,

Je suis entrain de réaliser un ribbon pour mettre par dessus des containers.

Cependant je rencontre un problème de mise en forme pour le centrage du texte présent dans le ribbon.
Sur google chrome tout est parfait (comme toujours) mais par contre sur IE ça décale le texte avec la présence d'un fond noir qui n'est pas présent dans le css en principe.

Voici le code html

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<div class="ribbon"><span class="ribbon-text">New</span></div>

Et le css :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.ribbon {
	position: absolute;
	z-index: 9999;
    width: 25px;
	height: 75px;
    margin: 0;
	top: 0px;
	right: 20px;
    background: rgb(97,205,245);
	opacity: 0.85;
    border-left: 1px dotted #FFF;
    border-right: 1px dotted #FFF;
    box-shadow: 3px 0 0 rgb(97,205,245),
                -3px 0 0 rgb(97,205,245);
	-moz-box-shadow: 3px 0 0 rgb(97,205,245),
               		 -3px 0 0 rgb(97,205,245);
	-webkit-box-shadow: 3px 0 0 rgb(97,205,245),
              		   -3px 0 0 rgb(97,205,245);
    -webkit-filter: drop-shadow(0 2px 5px hsla(0,0%,0%,.5));
}
.ribbon-text {
	position: relative;
	display: block;
	font-family: 'confortaa-light';
	font-size: 14px;
	font-weight: normal;
	color: #FFF;
	line-height: 75px;
	letter-spacing: 2px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-decoration: none;
}
.ribbon:after,
.ribbon:before {
    border-top: 15px solid rgb(97,205,245);
    content: '';
    height: 0;
    position: absolute;
    top: 100%;
    width: 0;
}
.ribbon:after {
    border-left: 20px solid transparent;
    right: -4px;
}
.ribbon:before {
    border-right: 20px solid transparent;
    left: -4px;
}
Et la démo ici : http://fiddle.jshell.net/MRHjV/4/

En espérant que l'on puisse m'aider!

Merci d'avance!

EDIT: les ombres ne marchent pas non plus sur IE