Faire fonctionner un CSS IE10 sous IE8 ?

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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...
Pièce jointe 163331

08/12/2014, 16h35
valaendra

Bonjour,

Depuis peu, je ne me casse plus la tête, j'utilise CSS3 PIE.
09/12/2014, 10h53
Zebulon777

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.
09/12/2014, 16h27
Zebulon777

1 pièce(s) jointe(s)
Citation:

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:

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 :

Pièce jointe 163427

Quelqu'un pourrait-il m'aider, siouplé ?
10/12/2014, 18h58
NoSmoking

Bonjour,

Citation:

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

je répondrai, voici ce que tu devrais regarder :fleche: 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 ?
10/12/2014, 20h00
adiGuba

Salut,

Citation:

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++
11/12/2014, 08h53
Bovino

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

Citation:

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. :cfou:
11/12/2014, 09h06
Bisûnûrs

Citation:

Envoyé par Bovino

Ca me donne envie de pleurer... Tu fais exactement l'inverse de ce qu'il faudrait...

Mais non, en général c'est moche les arrondis et les ombrages. :aie:
11/12/2014, 11h16
Zebulon777

Oula, tapez pas sur le messager ! :D :D :D

Je n'ai pas le choix, IE8 est imposé, mais il faut aussi savoir que c'est une application intranet et non internet, d'où l'obligation d'utiliser IE8 et c'est donc pour cela que j'ai supprimé radius et ombrage de mes CSS.

Je suis assez d'accord que trop de rondeur n'est pas vraiment un plus, mais encore une fois, je n'ai pas le choix, ce sont des préférences qui ont été choisies en amont.

Donc, consolez-vous en vous disant que je dépense la même énergie, alors qu'il serait plus simple de faire autrement, mais encore une fois, je me bats contre des moulins à vent !

Par contre, en ce qui concerne les fichiers HTC, je crois que je vais laisser tomber, comme ça plus de risque.

Bref, je vais revenir à de bons vieux carrés et rectangles et essayer de le leur faire admettre. :roll::calim2::roll:
11/12/2014, 14h51
valaendra

Citation:

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").
12/12/2014, 08h04
Zebulon777

Grosse discussion hier et la réponse à été "Hors de question !"... LOL Donc nous gardons nos IE8 éculés... :mouarf::mouarf::mouarf:
12/12/2014, 08h08
Bovino

J'espère qu'ils accepteront au moins de vous faire passer à Windows 2000 l'an prochain !

:pastaper:
12/12/2014, 10h19
Zebulon777

LOL, si tu savais... :ptdr:8O:calim2: