Rendu avec ie10 sous windows 7

**barale61** · 12/05/2013, 14h33

Bonjour,

J'ai un problème de rendu avec ie10 sous windows 7. Pour tout effet de rollover (:hover) cela ne fonctionne tout simplement pas. Marche avec FireFox, googleChrome, opéra , Safari etc. et même avec XP ou SEVEN mais rien à faire sur IE10. Merci de me dire de quoi cela peut venir (pour infos je test en local avec XAMPP et même sans. Je ne veux pas mettre en ligne pour le moment pas d'espace loué (je suis sous VirtualBox pour Windows)

**Candygirl** · 12/05/2013, 15h08

Hello,

Sans code ça va être dur de te donner une réponse...

Cela peut-être dû au passage d'IE en mode Quirks (vérifiable en appuyant sur F12 ds IE10) pour une raison ou une autre (absence de doctype, présence du BOM,...) et donc les :hover sur autre chose que des liens ne seraient pas pris en compte.

**barale61** · 12/05/2013, 20h05

Bonjour merci de votre réponse si rapide et voici le code:

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
 
.page_actu_img{
    -moz-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    opacity: 1;
	}
 
page_actu_img:hover{
    position:relative;
    width: 200%;
    height: 200%;
    margin-left: -5px;  
    margin-top: -10px;
    padding: 0;
    opacity:1;
    background:#FFF;	
    -webkit-transform: rotate(-9deg);
    -moz-transform: rotate(-9deg);
    transform: rotate(-9deg);
    border:1px solid #393939;
    box-shadow: 0px 2px 2px #393939, 2px 2px 2px #393939, -2px -2px 2px #393939 ;
    z-index:100!important;
    -moz-transform: rotate(-5deg) scale(1.10);
    -webkit-transform: rotate(-5deg) scale(1.10);
    -o-transform: rotate(-5deg) scale(1.10);
    -ms-transform: rotate(-5deg) scale(1.10);
    transform: rotate(-5deg) scale(1.10);
    opacity: 1;
}

**Candygirl** · 12/05/2013, 21h02

Dans le css donné, il manque un . devant ton sélecteur page_actu_img:hover

As-tu vérifié si IE était en mode Quirks en appuyant sur F12 ? (l'information s'affiche au haut de la fenêtre qui s'ouvre au bas de l'écran).

**barale61** · 12/05/2013, 22h46

Le . était une erreur de Copier/Coller. Le doctype y est bien mais IE10 est bien en mode Quirks et je ne connaissais pas ce mode qui existe apparamment pour tous les navigateurs. Mais comment éviter cela ? Je vais essayer d'en apprendre plus à ce sujet.

**Candygirl** · 12/05/2013, 23h41

Quel doctype affiches-tu (est-il complet?) ? le doctype est-il bien la première chose tout en haut de ton document ? Peux-tu cc les toutes premières lignes de ton html ? Est-tu sûr d'avoir sauvegardé ton fichier en utf-8 sans le BOM (si tu utilises cet encodage) ?

**barale61** · 13/05/2013, 00h07

Voici mes premières lignes:

Code php :

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

1
2
3
4
5
6
<?php require_once('navigateur.php'); ?>
<?php require_once('frm_ajout/securite.php'); ?>
<?php $nav_en_cours = 'page_accueil'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

Et j'ai essayé avec ce commentaire qui ne donne rien:

Code html :

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

1
2
3
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<![endif]-->

Encodage utilisé: ANSI

**Candygirl** · 13/05/2013, 07h54

Bonjour,

Peux-tu cc les premières lignes du code html généré sur la page qui pose problème stp?

**barale61** · 13/05/2013, 13h53

Voici le code tout en sachant que les rollover fonctionnent juste pour le menu a: mais pas les div:

Code html :

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
<link href="css/ie10.css" rel="stylesheet" type="text/css" /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationCheckbox.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryValidationCheckbox.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script src="js_back/affichette.js" type="text/javascript"></script>
<title>Aper?u des recettes de cuisine</title>
</head>
<body>
<div id="globalheader"></div>
<div id="menu_membres"><br />

etc.

**Candygirl** · 13/05/2013, 14h25

IE passe en mode quirks à cause de ceci:

Code html :

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

<link href="css/ie10.css" rel="stylesheet" type="text/css" />

Il ne doit rien avoir avant le doctype (même la déclaration xml ou un simple commentaire faisaient passer les anciennes versions d'IE en mode Quirks).
Retire, ou déplace, cette balise link (qui n'a rien à faire là) et ton problème de passage en mode quirks devrait, en principe, être résolu.

**barale61** · 13/05/2013, 23h22

Merci c'est super ça marche !

(c'est ou résolu?)

**Candygirl** · 14/05/2013, 00h09

Tout au bas de la dernière réponse, vers le centre de la page

**barale61** · 14/05/2013, 12h43

Merci encore !

Rendu avec ie10 sous windows 7

CSS

Discussions similaires

Partager

Partager