Problèmes avec Ie9

**PascalAC21** · 28/03/2012, 12h21

Bonjour,

En testant mes pages sur différents navigateurs, j'ai pu constater que sous ie9 (j'ai pas osé ouvrir sous des ie plus anciens

) plusieurs petites choses ne s'affichaient pas correctement :
- les coins arrondis en CSS
- les dégradés en CSS (qui ne s'affiche pas du tout)
- les couleurs rgba

Pourtant, j'ai lu que Microsoft avait annoncé en 2010 que ie9 supporterait css3 et rgba...

Après une rapide recherche, pour les coins arrondis et les dégradés, j'ai trouvé une solution qui semblait prometteuse avec les fichiers pie.htc, etc... Mais cela ne fonctionne toujours pas.

voilà mes codes :
Dans la feuille de style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.CoinsArrondis10px {
			overflow: hidden;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			behavior: url('pie/PIE.htc');
		}
.CoinsArrondis5px {
			overflow: hidden;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			behavior: url('pie/PIE.htc');

CSS dans le Head la page html :

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
 
#FichiersAcceptes {visibility: visible; position: absolute; z-index: 2; left: 17px; top: 0px; width: 220px; height: 325px;
			background-image: linear-gradient(left bottom, rgb(221,224,222) 35%, rgb(189,189,189) 66%);
			background-image: -o-linear-gradient(left bottom, rgb(221,224,222) 35%, rgb(189,189,189) 66%);
			background-image: -moz-linear-gradient(left bottom, rgb(221,224,222) 35%, rgb(189,189,189) 66%);
			background-image: -webkit-linear-gradient(left bottom, rgb(221,224,222) 35%, rgb(189,189,189) 66%);
			background-image: -ms-linear-gradient(left bottom, rgb(221,224,222) 35%, rgb(189,189,189) 66%);
 
			background-image: -webkit-gradient(
								linear,
								left bottom,
								right top,
								color-stop(0.35, rgb(221,224,222)),
								color-stop(0.66, rgb(189,189,189))
			);
			-pie-background: linear-gradient(left bottom, rgb(221,224,222) 35%, rgb(189,189,189) 66%);
			behavior: url('pie/PIE.php');
		}

J'ai téléchargé les fichiers pie hier sur http://css3pie.com/, je les ai dézippé et mis au bon endroit, dans un dossier pie.

Aurais-je loupé quelque chose ?

Pour finir, j'ai également un comportement bizarre avec les puces d'une liste : elles s'affichent en face de la seconde ligne de texte, et même en face du second br (pour les lignes "stand kakemono" et "pochettes de plan") dans le code suivant :
Le CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
.Contenu_GF {padding-left: 5px; width: 340px; list-style-type: circle; }
.Contenu2_GF {padding-left: 10px; width: 340px; list-style-type: square; }

Le html

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
 
<div id="Texte_Evenementiel">		
				<ul>
					<li class="Contenu_GF"> <h2>Posters</h2>
					<li class="Contenu_GF"> <h2>Affiches salons, foires, congrès</h2>
					<li class="Contenu_GF"> <h2>Affiches magasins, vitrines</h2>
					<li class="Contenu_GF"> <h2>Affiches manifestations</h2>
					<li class="Contenu_GF"> <h2>Affiches expositions</h2>
					<li class="Contenu_GF"> <h2>Bandeaux, calicots</h2>
					<li class="Contenu_GF"> <h2>Stands, kakemono</h2>
					</br>
					</br>
					<li class="Contenu2_GF"> <h2>Papiers mat, satiné, brillant</h2><p class="text2">de 120g à 200g</p>
					<li class="Contenu2_GF"> <h2>Bâche, vinyl adhésif, supports spéciaux</h2>
					<li class="Contenu2_GF"> <h2>Laize : jusqu'à 1,50 m</h2>
				</ul>
			</div>
			<div id="Texte_Archi">
				<ul class="Liste2_GF">
					<li class="Contenu_GF"> <h2>Plans noir et couleur</h2>
					<li class="Contenu_GF"> <h2>Numérisation de plan, noir et couleur</h2>
					<li class="Contenu_GF"> <h2>Dossiers techniques</h2>
					<li class="Contenu_GF"> <h2>Dossiers de soumission</h2>
					<li class="Contenu_GF"> <h2>Pliage de plans</h2>
					<li class="Contenu_GF"> <h2>Pochettes de plans</h2>
					</br>
					</br>
					<li class="Contenu2_GF"> <h2>Papiers 80g, 90g et 120g</h2>
					<li class="Contenu2_GF"> <h2>Formats :</br>A2 - A1 - A0 - A0+ - A0++</h2>
					<li class="Contenu2_GF"> <h2>Prise en charge des fichiers</br>format image, PDF et PLT</h2>
				</ul>
			</div>

L'ensemble des polices sont d'ailleurs plus "grosses" dans ie que dans ff ou chrome, ce qui occasionne plus de saut de ligne.

De nouveau, je me demande si j'ai fait quelque chose pas correctement, et si il existe un moyen de palier à ça sans passer par des pages spécifiques pour ie ou des images de fond.

Merci pour votre aide.

**Candygirl** · 28/03/2012, 12h55

Hello,

IE9 supporte bien le rbga ainsi que border-radius. Si tu ne les visualises pas c'est probablement que IE n'interprète pas ta page avec le moteur d'IE9 mais un plus ancien.

As-tu bien renseigné correctement un doctype tout en haut de ton document ? Si ce n'est pas le cas IE passe en mode de rendu Quirks et il est donc normal que ces propriétés ne soient pas prises en compte.

Dans ton IE, n'as-tu pas activé le mode de compatiblité utilisant un ancien moteur de rendu d'IE?

En appuyant sur F12, tu feras apparaître une barre d'outil en bas et tu verras si tu as bien mode navigateur:IE9 et mode de document normes IE9 d'affichés.

Autrement le plus simple serait de nous donner un lien que l'on puisse regarder plus en détail.

**PascalAC21** · 28/03/2012, 14h22

Bonjour,

merci beaucoup de ta réponse.
Les modes n'étaient pas bons (ie9 compatibilité et ie7).
Je récupère effectivement les puces des listes et le rgba.
J'ai également récupéré un javascript de Bovino, je crois, pour un changement d'image de fond avec dégradé.

Par contre, je ne récupère pas du tout les coins arrondis ni le dégradé.
J'ai noté aussi qu'une ligne en hr est au moins 2 fois plus épaisse qua dans chrome ou ff. ???

Mon doctype est celui-ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Ma page n'est pas encore en ligne, donc je la joins, si ça peut être utile.
Les coins arrondis sont des classes dans ma feuille de style, comme écrit dans mon précédent message.

Merci encore.

**PascalAC21** · 30/03/2012, 15h14

Bonjour,

Suite à une remarque de NoSmoking dans une autre discussion, j'ai regardé comment marche ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

filter: progid:DXImageTransform.Microsoft.gradient

Effectivement, cela fonctionne. On obtient bien un dégradé sous ie9 (je n'ai pas regardé sur les version antérieure, mais il semblerait que cela fonctionne aussi).

Voilà un petit mémo pour ceux qui chercherait également ces informations :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
monblock {
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr#AARRGGBB,endColorstr#AARRGGBB);
}

où RR est la valeur du rouge, etc...

et où AA est la couche alpha qui permet une transparence, en hexadécimale aussi, avec pour valeurs :
* 0% (transparent) -> #00 en hexadécimal
* 20% -> #33
* 50% -> #80
* 75% -> #C0
* 100% (opaque) -> #FF

J'ai trouvé ceci sur un autre site.

Il manque la possibilité d'appliquer un angle à ce dégradé, mais bon, c'est déjà très bien.

Reste les coins arrondis qui ne fonctionne pas...

Problèmes avec Ie9

CSS

Vue hybride

Discussions similaires

Partager

Partager