28172 sujets

CSS et mise en forme, CSS3

Problème d'affichage de display:inline-block; dans internet explorer

Bonjour,

j'ai regardé dans le forum et les FAQ et je n'ai pas trouvé de réponse à mon problème...

J'ai créer une liste de liens horizontaux en haut d'une page :

- la balise <UL> flotte à droite de la page

- les balises <LI> utilisent un display inline-block (j'utilise un display inline pour IE6) et tout fonctionne correctement pour tous les navigateurs (FF 3.65 / 7, Chrome, IE8 et Opera...)

J'ai voulu testé sur IE9 ma page et je me suis rendu compte que ces liens disparaissent au survol ! J'ai voulu corriger en mettant tout le monde d'accord avec un display:inline; et cette fois-ci c'est tous mes liens qui disparaissent en même temps...

Voici le code utilisé :

<ul class="skiplink" id="topAnchor">	
	<li class="liens_skip"><a tabindex="1" accesskey="3" href="outils/accessibilite/#navigationNiveau1">Accéder au menu</a></li>
    <li class="liens_skip"><a tabindex="2" accesskey="2" href="outils/accessibilite/#content">Accéder au contenu</a></li>
    <li class="liens_skip"><a tabindex="3" href="outils/accessibilite/#indexedsearch">Accéder à la recherche</a></li>
    <li class="hautPage"><a href="/accueil/" >Accueil</a>&nbsp;|&nbsp;</li>
    <li class="hautPage"><a href="/outils/plan-du-site/" accesskey="5">Plan du site</a>&nbsp;|&nbsp;</li>
    <li class="hautPage"><a href="/outils/accessibilite/" accesskey="0">Accessibilité</a>&nbsp;|&nbsp;</li>
    <li class="hautPage"><a href="/outils/contact/" accesskey="9">Contact</a></li>
</ul>


et les CSS :

li {
    list-style: none outside none;
}
.skiplink {
    float: right;
    margin: 0;
    padding: 0;
    z-index: 9999;
}
.liens_skip {
    list-style-type: none;
    position: absolute;
    top: 0;
}
.liens_skip a {
    display: block;
    left: -1000px;
    padding: 0.6em;
    position: absolute;
    top: -1000px;
    white-space: nowrap;
}
.hautPage {
    color: #000;
    display: inline;
    font-size: 0.625em;
    font-weight: bold;
    list-style-type: none;
    margin-left: -1px;
    position: static;
}
.hautPage a {
    color: #000;
    font-size: 1.333em;
    font-weight: bold;
    position: relative;
    top: 1px;
}


J'ai pu vérifié que le problème disparaît quand j'enlève le float right de la balise <UL> : est-ce normal que IE9 ait ce bug (et uniquement lui dans la famille des IEs...) et aucun autres navigateurs ?

Peut-on le corriger (pas trouvé de solutions depuis...)

Merci de votre attention et de vos réponses éventuelles !
Modifié par Innercut (04 Oct 2011 - 09:01)
Non, malheureusement je travaille en local...

Je vais essayer de créer une page dès que possible pour simuler cette erreur sur un de mes sites persos...

Je t'enverrai alors un mail en retour !
Pour le mail, ce n'est pas la peine.
Essaie de faire un test reproduisant le problème sur JsBin ou JSFiddle et envoie nous le lien.

A vue de nez, je suis quasiment certain que tu as utilisé une propriété de CSS3 non reconnue par IE sans penser au fallback.
bonsoir,

questions :
quel doctype ?
en appuyant sur la touche f12 , qu'est ce que IE9 indique comme rendu
affichage : IE7,8, 9 ou compatibilité IE9
mode : quirk / ie7 / ie8 / ie9

En local et avec tes extrait de code aucun defaut apparent.

z-index marche si conjoint a position:relative, absolute ou fixed. (position ne s'herite pas, voir regle .skiplink)

position:relative; Quel utilité pour .hautpage a ?
en general il peut y avoir des effets secondaire inattendu ou différent d'un navigateur a l'autre même si les navigateur ont aujourd'hui tendance a être de plus en proche les uns des autres dans les interprétations et rendus CSS (CSS 3 avec de grosses réserves ) , a n'utiliser donc que si "utile"" ... comme les autres propriétés d'ailleurs.

Une page en ligne reproduisant le bug decrit est l'idéal Smiley smile (oui , deja dit)

cordialement, GC
Merci GC et Florian pour votre retour !

Voici les infos pour GC :

Doctype :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Mode navigateur et mode document : IE9

Pour Florian : je n'utilise pas de CSS3 dans mes feuilles de styles (du moins pas ici...)

Je vois pour du code en ligne ou sur JSFiddle...
Modifié par Innercut (04 Oct 2011 - 09:01)
J'ai passé un peu de temps à tout synthétiser en une seule page, voici le code :

<!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" />
<STYLE type="text/css">
  <!--
/* 01 = Reset */

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0; outline:none;}
form, fieldset {border:none;}

/* 02 = Taille de texte globale */

html {font-size:100%;}
body {font:0.75em Arial, Helvetica, Garuda, sans-serif; background-color:#FFF; color:#333;}

/* 03 = Styles globaux */

li {list-style:none;}
img {border:none;}
a {color:#277abe; outline:0; text-decoration:none;}
a:hover {text-decoration:underline;}
a:focus {outline:thin dotted #666;}

/* 04 = Structure */

body {font:0.75em Arial, sans-serif;}
	#wrap {color:#666; position:relative;}
		.header {}
			.contentHeader {margin:0 auto; position:relative; width:960px;}
			.hautAccueil {height:330px; margin:15px 0 53px;}

/* 05 = Header */

.hautPage {color:#fff; font-size:0.625em; font-weight:bold; display:inline-block; list-style-type:none; margin-left:-1px; position:relative;}
.hautPage a {color:#000; font-size:1.333em; font-weight:bold; position:relative; top:1px;}
.skiplink {float:right; margin:0; padding:0; z-index:9999;}
.liens_skip {list-style-type:none; position:absolute; top:0;}
.liens_skip a {display:block; left:-1000px; padding:0.6em; position:absolute; top:-1000px; white-space:nowrap;}
  -->
</STYLE>
<title>Bug affichage IE9 et display:inline-block...</title>
</head>

<body class="page-277">

    <div id="wrap">
    
        <div class="header">
        
            <div class="contentHeader">
              
                <ul class="skiplink" id="topAnchor">	
                    <li class="liens_skip"><a tabindex="1" accesskey="3" href="outils/accessibilite/#navigationNiveau1">Accéder au menu</a></li>
                    <li class="liens_skip"><a tabindex="2" accesskey="2" href="outils/accessibilite/#content">Accéder au contenu</a></li>
                    <li class="liens_skip"><a tabindex="3" href="outils/accessibilite/#indexedsearch">Accéder à la recherche</a></li>
                    <li class="hautPage"><a href="/accueil/" >Accueil</a>&nbsp;|&nbsp;</li>
                    <li class="hautPage"><a href="/outils/plan-du-site/" accesskey="5">Plan du site</a>&nbsp;|&nbsp;</li>
                    <li class="hautPage"><a href="/outils/accessibilite/" accesskey="0">Accessibilité</a>&nbsp;|&nbsp;</li>
                    <li class="hautPage"><a href="/outils/contact/" accesskey="9">Contact</a></li>
                </ul> 
                       
            </div><!-- .contentHeader -->
            
        </div> <!-- .header -->
        
    </div><!-- .wrap -->

</body>
</html>

Cela passe sous tous les navigateurs SAUF IE9...
Modifié par Innercut (04 Oct 2011 - 09:03)
bonsoir,

Le position:relative; appliqué a #wrap et .contentHeader est fautif et ne semble n'avoir aucune utilité. a enlevé a priori.

cordialement
GC
En fait, tous les style appliqués ici ont une importance relative à d'autres éléments que je n'ai pas fait figurés (la page et les styles du projet sont beaucoup plus conséquents)

Je ne peux pas me passer de ce positionnement relatif !

Pour faire suite à mon problème, j'ai essayé de me passer du display:inline-block; pour un display:block; avec un float:left; => le résultat est toujours mystérieux sous IE9 avec des disparition aléatoires des liens au survol !

Le problème est lié aux skiplinks (le problème disparaît dès qu'on les enlève) mais j'ignore toujours la raison...
Modifié par Innercut (30 Sep 2011 - 10:11)
bonsoir, dans ce cas (sur la base de ton extrait)

1) laisser .skiplink dans le flux sans flottement et appliquer un text-align:right;

2) passer .liens_skip en display:inline; et c'est tout

3) .liens_skip a en position absolute top :- XX; se suffit a les faire disparaitre de l’écran.

4) les .hautPage etant deja en display:inline-block , il ne devrait n'y avoir rien a y faire, (note. pas toujours convaincu que pour eux le positionnement relatif soit nécessaire.)

si le cocktail relative/float/absolute/relative explose , il faut l'alleger Smiley cligne

Cordialement
Merci pour vos réponses !

J'ai modifié comme GC-Nomade m'a conseillé le flottement des skiplinks et leur display en inline... Et tout est rentré dans l'ordre...

Effectivement le cocktail "relative/float/absolute/relative" pose problème sous IE9 mais il n'y a aucun souci pour FF et les autres navigateurs (même IE8 et IE7 !)

Mais je n'ai toujours pas eu ma réponse quant au pourquoi du comment !

De plus, dans ma page de production, j'ai encore quelques petits bugs inexplicables de placement avec des fflottements à d'autres endroits...

Alors, si quelqu'un a des infos sur les bugs d'IE9 je suis preneur (je prie le ciel qu'il ne s'agisse pas d'un nouveau Haslayout !)
Innercut a écrit :
je prie le ciel qu'il ne s'agisse pas d'un nouveau Haslayout !

Smiley decu , on est en plein dans ce qui joue sur les contexte de formatage et le reflow (pour le relatif) ... .
La regle de base serait de faire léger et le juste nécessaire (avec ceux la en particuliers)

cordialement
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Sujet clos
Aller à