Bord arrondi sous IE 9 ?

[noobyyy]

bonjour j'aimerai savoir comment avoir les bords arrondis sous IE9 ?

Code :

1
2
3
4
5
 
	-khtml-radius: 10px;
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px;

Il me manque quelle ligne ?

[charly-b]

Salut,

Apparement avec un <meta http-equiv="X-UA-Compatible" content="IE=edge"/> dans le head ça fonctionne.

Désolé je n'ai pas testé, je fais mes tests sur ie8.

A++

[noobyyy]

Merci ! ça marche qu'avec ce code css, ils se sont pas foulé chez microsoft...

IE 8 c'est galère -_- je crois même que c'est plus simple IE 7 avec le code suivant :

Code :

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

peux-tu confirmer ?

[Pierre Maurette]

Pour moi, ça fonctionne avec

Code :

1
2
3
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;

(Je vais regarder à quoi correspond -khtml-radius)
Pensez à vérifier le mode de compatibilité de votre IE9, en faisant F12 c'est le plus rapide.

[noobyyy]

Code :

1
2
3
4
5
6
7
 
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;

IE connait pas ceci

[charly-b]

Bon j'ai testé, rien à faire sur IE8, les corner radius ne passent pas .

J'avais jamais vu non plus -khtml, je pense que c'est pour Konqueror (Linux - KDE) .

[ornitho13]

Envoyé par noobyyy

Code :

IE connait pas ceci

peut être parce que d'une part ces propriétés n'existent pas (celles en gras) et d'autre part parce que -moz n'est interprété que par les navigateurs de type Firefox, -webkit pour les navigateurs de type webkit (chrome et safari) et -khtml pour les navigateurs de type Konqueror, donc non ce ne sera pas interprété par IE

[charly-b]

Pour IE9 , faut ajouter :

Code :

1
2
3
4
5
6
7
8
9
        -moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
        border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
        border-bottom-left-radius: 5px;

[noobyyy]

Envoyé par ornitho13

peut être parce que d'une part ces propriétés n'existent pas (celles en gras)

faux

http://www.css3.info/preview/rounded-border/

[ornitho13]

voici ce qu'il y avait :

Code :

1
2
3
4
5
6
7
8
9
 
 -moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
        border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
        border-bottom-left-radius: 5px;

et voici ce qu'il faudrait :

Code :

1
2
3
4
5
6
7
8
 -moz-border-bottom-right-radius: 5px;
	-khtml-border-bottom-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
        border-bottom-right-radius: 5px;
	-moz-border-bottom-left-radius: 5px;
	-khtml-border-bottom-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
        border-bottom-left-radius: 5px;

au cas où tu n'aurais pas compris, le radius se met à la fin et il manquait les tiret entre bottom et left par exemple...)

--EDIT --

Autant pour moi la première notation est accepté mais pour mozilla uniquement a priori ! Je ne le savais même pas !

Par contre a vérifier parce que a priori ça n'a pas l'air de fonctionner chez toi, donc peut être que la deuxiéme notation que je t'ai fourni fonctionnera

[charly-b]

Oui les -moz-border-radius sont corrects.
Ça ne fonctionnait pas pour lui sur IE apparement, il manquait les css standards (border-bottom-left-radius ...) .

[noobyyy]

j'étais parti dans la syntaxe de tous les navigateurs:


Pris en charge de mozilla, google chrome, konqueror

Code :

1
2
3
4
5
6
7
 
	-moz-border-bottom-left-radius: 5px;	
	-moz-border-bottom-right-radius: 5px;   	
        -khtml-border-bottom-left-radius: 5px;
	-khtml-border-bottom-right-radius: 5px;	
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;

alors que en 2 lignes ça marche partout :

Code :

1
2
3
 
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

bien sur Ie 9 ne fonctionne pas. (dramatique )

sinon les deux syntaxes fonctionnent chez moi. (avec ou sans tiret)