Faire fonctionner un CSS IE10 sous IE8 ?

**Zebulon777** · 08/12/2014, 14h32

Bonjour tout le monde,

A partir d'IE10, j'ai un CSS qui fonctionne parfaitement, mais on me demande de l'adapter au maximum pour IE8.
J'avoue que je n'ai pas créé moi-même ce CSS, mais que ca a été fait via un générateur.

Voici donc le CSS en question :

Code css :

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
/* TABLE BLEUE COINS ARRONDIS AVEC CURSEUR LIGNE GRISE CADRAGE CENTRE*/
 
.CSSTableBleueCoinsArrondis {
	border:1px solid #ffffff;
	margin:0px;padding:0px;
	margin-bottom:20px;/*permet d'avoir un espace entre chaque tableau*/
	width:70%;
	box-shadow: 10px 10px 5px #888888;
 
	-moz-border-radius-bottomleft:25px;
	-webkit-border-bottom-left-radius:25px;
	border-bottom-left-radius:25px;
 
	-moz-border-radius-bottomright:25px;
	-webkit-border-bottom-right-radius:25px;
	border-bottom-right-radius:25px;
 
	-moz-border-radius-topright:25px;
	-webkit-border-top-right-radius:25px;
	border-top-right-radius:25px;
 
	-moz-border-radius-topleft:25px;
	-webkit-border-top-left-radius:25px;
	border-top-left-radius:25px;
}.CSSTableBleueCoinsArrondis table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.CSSTableBleueCoinsArrondis tr:last-child td:last-child {
	-moz-border-radius-bottomright:25px;
	-webkit-border-bottom-right-radius:25px;
	border-bottom-right-radius:25px;
}
.CSSTableBleueCoinsArrondis table tr:first-child td:first-child {
	-moz-border-radius-topleft:25px;
	-webkit-border-top-left-radius:25px;
	border-top-left-radius:25px;
}
.CSSTableBleueCoinsArrondis table tr:first-child td:last-child {
	-moz-border-radius-topright:25px;
	-webkit-border-top-right-radius:25px;
	border-top-right-radius:25px;
}.CSSTableBleueCoinsArrondis tr:last-child td:first-child{
	-moz-border-radius-bottomleft:25px;
	-webkit-border-bottom-left-radius:25px;
	border-bottom-left-radius:25px;
}.CSSTableBleueCoinsArrondis tr:hover td{
	background-color:#cccccc;
}
.CSSTableBleueCoinsArrondis td{
	border:1px solid #ffffff;
	vertical-align:middle;
	background-color:#6699cc;
	border-width:0px 1px 1px 0px;
	text-align:center;
	padding:3px;
	padding-left:20px;/*Permet d'avoir un décallage à gauche dans toutes les cellules*/
	font-size:14px;
	font-family:Arial;
	font-weight: normal;
	color:#000000;
}.CSSTableBleueCoinsArrondis tr:last-child td{
	border-width:0px 1px 0px 0px;
}.CSSTableBleueCoinsArrondis tr td:last-child{
	border-width:0px 0px 1px 0px;
}.CSSTableBleueCoinsArrondis tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.CSSTableBleueCoinsArrondis tr:first-child td{
	border:0px solid #ffffff;
	background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");
	background: -o-linear-gradient(top,#003366,003f7f);
 
	background-color:#003366;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:21px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.CSSTableBleueCoinsArrondis tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");
	background: -o-linear-gradient(top,#003366,003f7f);
 
	background-color:#003366;
}
.CSSTableBleueCoinsArrondis tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableBleueCoinsArrondis tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}

Ce CSS est appliqué à une DIV qui contient les tables concernées.

Si on pouvait arriver à garder la maximum de chose, ce serait super, même si je crois savoir que les coins arrondis et l'ombre ne pourront être conservés.

Code Javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
...
...
...
WDivTAB_00 = document.getElementById("DivTAB_00");
WNomDIV = "DivTAB" + WIndex;
WDiv = document.createElement("div");
WDiv.setAttribute("id", WNomDIV);
WDiv.setAttribute("class", "CSSTableBleueCoinsArrondis");
...
...
...

Quelqu'un pourrait-il m'aider, svp ?

Je vous mets un exemple de ce que ça donne...
Nom : Table01.png
Affichages : 248
Taille : 28,3 Ko

**valaendra** · 08/12/2014, 16h35

Bonjour,

Depuis peu, je ne me casse plus la tête, j'utilise CSS3 PIE.

**Zebulon777** · 09/12/2014, 10h53

Merci, je ne connaissais pas, je vais le récupérer et regarder ça de plus près.

Pour revenir à mon "problème", je l'ai résolu, voici comment, si ça peut aider :

- j'ai supprimé du CSS, tout ce qui est radius et ombrage
- j'ai appliqué le CSS en question sur les <TABLE> et non plus sur la <DIV> contenant les <TABLE>, comme c'était au départ.
- j'ai utilisé un META forçant la compatibilité IE8 : <meta http-equiv="x-ua-compatible" content="IE=8">

Voila et merci encore pour m'avoir lu et aider.

**Zebulon777** · 09/12/2014, 16h27

Envoyé par valaendra

Bonjour,

Depuis peu, je ne me casse plus la tête, j'utilise CSS3 PIE.

Super ce truc, merci beaucoup.

Par contre, impossible de trouver comment émuler TEXT-SHADOW ?

J'ai essayé les filtres, mais sans succès :

Code css :

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

1
2
3
4
5
 
.CadreRelief2
{
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);
}

Voici ce que j'ai et ce que je voudrai avoir :

Nom : Rellief.png
Affichages : 254
Taille : 38,9 Ko

Quelqu'un pourrait-il m'aider, siouplé ?

**NoSmoking** · 10/12/2014, 18h58

Bonjour,

Voici ce que j'ai et ce que je voudrai avoir :

je répondrai, voici ce que tu devrais regarder

Filtre sur IE.

On peut quand même se poser la question : l’énergie que tu dépenses, et fait dépenser, est-elle VRAIMENT indispensable ?

**adiGuba** · 10/12/2014, 20h00

Salut,

Envoyé par NoSmoking

On peut quand même se poser la question : l’énergie que tu dépenses, et fait dépenser, est-elle VRAIMENT indispensable ?

Gros +1 : je pense que vouloir à tout prix un rendu identique sur les vieilles versions d'IE est une perte de temps.

Il n'y a pas de coin arrondi ni d'ombrage sous IE8 ! Est-ce réellement si grave ?
Surtout qu'il s'agit d'une dégradation progressive : c'est moins beau mais çà reste fonctionnelle.

Et attention aux fichiers .htc comme CSSPIE.
Cela permet bien des choses, mais c'est basé sur la machine virtuelle JavaScript d'IE... qui n'est pas forcément la plus performante.
Cela peut entrainer des problèmes de performances voir des bugs...

a++

**Bovino** · 11/12/2014, 08h53

Je ne peux qu'approuver les deux réponses précédentes.

Si les utilisateurs font le choix d'utiliser IE 8-, ils font alors le choix de ne pas pouvoir profiter des dernières améliorations récentes.
A mon sens, la notion de pixel perfect (site identique au pixel près sur tous les navigateurs) est une aberration.
Les apports de CSS 3 ne sont que d'ordre esthétique, pas fonctionnel.

En revanche, quand je lis

Envoyé par Zebulon777

- j'ai supprimé du CSS, tout ce qui est radius et ombrage

Ca me donne envie de pleurer... Tu fais exactement l'inverse de ce qu'il faudrait...
Au lieu de récompenser ceux qui utilisent un navigateur récent en leur livrant une interface plus aboutie visuellement, tu les punis à cause de ceux qui font le choix de rester obsolètes. C'est n'importe quoi.

**valaendra** · 11/12/2014, 14h51

Envoyé par adiGuba

Et attention aux fichiers .htc comme CSSPIE.
Cela permet bien des choses, mais c'est basé sur la machine virtuelle JavaScript d'IE... qui n'est pas forcément la plus performante.
Cela peut entrainer des problèmes de performances voir des bugs...

Tout à fait d'accord mais on a parfois des clients relativement chiants qui ne veulent pas utiliser autre chose que leur daube d'IE8 sur leur windows antique (XP, vista) alors que 99% des utilisateurs dudit site seront, eux, à jour... ça ne donne pas envie de faire autrement (et peut-être qu'il comprendra enfin ce que veut dire "Mettre à jour").

Faire fonctionner un CSS IE10 sous IE8 ?

CSS

Vue hybride

Discussions similaires

Partager

Partager