positionnement absolu et la barre de défilement dans Internet Explorer

Responsabilitépositionnement absolu et la barre de défilement dans Internet Explorer

Cette question est une republication. Je l'ai initialement demandé here. Alors qu'il y avait une personne qui a eu la gentillesse de m'aider, il n'a finalement pas trouvé de solution idéale. La réalité de la situation est Doctype n'a tout simplement pas le nombre énorme d'utilisateurs que Stack Overflow fait. C'est un problème important pour moi, et j'ai vraiment besoin de plus d'opinions à ce sujet.

Le problème

J'ai mis en place une vue arborescente en utilisant HTML et CSS. Lorsqu'un élément de cette vue arborescente est survolé, une info-bulle s'affiche en dessous. Tout fonctionne très bien dans Firefox, mais pas dans Chrome ou Firefox.

Mon problème est que l'info-bulle utilise un positionnement absolu pour permettre à son contenu de s'afficher par-dessus d'autres éléments. Quand je défile dans Firefox, le positionnement de ces infobulles se déplace pour refléter leurs nouveaux emplacements. Toutefois, Internet Explorer conserve la position d'origine des éléments. Ainsi, si je survole un élément défilant, l'info-bulle s'affiche sous l'emplacement de l'élément à l'origine. J'ai lu que ceci pourrait être corrigé en ajoutant une position: par rapport à ma vue arborescente, mais cela empêcherait les info-bulles de planer sur toute la page.

Voici quelques exemples de code pour illustrer mon problème:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Example</title> 

    <!-- import css files --> 
    <link href="example.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <div id="wrapper"> 
    <div id="tree-view"> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    <a href="#">tooltip example 
    <span class="tooltip"> 
     <strong>Info</strong> 
     <span class="tooltip-info"> 
     Here is some information about the thing you're hovering over. 
     </span> 
    </span> 
    </a> 
    </div> 
    <div id="main-content"> 
    main 
    </div> 
    </div> 
</body> 
</html>

Et voici le CSS pour l'exemple:

#wrapper 
{ 
} 

#tree-view 
{ 
float: left; 
width: 200px; 
height: 400px; 
background-color: #BBFFFF; 
overflow: auto; 
} 

#main-content 
{ 
float: left; 
width: 600px; 
height: 400px; 
background-color: #FFFFBB; 
} 

#tree-view a 
{ 
display: block; 
position: relative; 
} 

#tree-view a span.tooltip 
{ 
position: absolute; 
z-index: 100; 
display: none; 
} 

#tree-view a:hover span.tooltip 
{ 
/* positioning */ 
margin-left: 1em; 
margin-top: 1em; 
display: block; 
position: absolute; 

/*formatting*/ 
text-decoration: none; 
background: #DDD; 
border: 1px solid #BBB; 
padding: 5px; 
white-space: normal; 
width: 300px; 
color: black; 
} 

#tree-view .tooltip strong 
{ 
display: block; 
} 

#tree-view .tooltip .tooltip-info 
{ 
display: block; 
}

Si la position: tag relative est retirée de l'ancre de infobulle, les info-bulles afficher correctement dans Firefox. Cependant, sans cela, les info-bulles ne s'affichent pas correctement dans Internet Explorer.

Merci pour l'aide.

Source

2010-08-11 LandonSchropp

Je cessé d'utiliser mes propres infobulles et commuté sur Qtip (http://craigsworks.com/projects/qtip/) un certain temps. Il est testé sur plusieurs navigateurs, simple à instancier et a l'air exceptionnel. Si vous êtes un utilisateur de ThemeRoller, la version bêta (disponible dans les versions nocturnes) prend entièrement en charge le style de ThemeRoller. Dans l'ensemble, je recommande fortement de le considérer pour rendre la vie facile ... c'est juste moins de dommages au cerveau.

Dans la prochaine version de JQuery UI, une fonctionnalité similaire sera intégrée au noyau. Des scripts similaires sont disponibles pour Dojo, Prototype et MooTools.

Source

2010-08-11 19:23:00 bpeterson76

C'est une très belle bibliothèque. Mon raisonnement principal pour l'utilisation de CSS était que nous pouvions formater les info-bulles avec plus de contrôle tout en ayant le site être dégradable. Cependant, les avantages de cette bibliothèque pourraient en valoir la peine. Merci. – LandonSchropp

Le code que vous avez publié fonctionne immédiatement dans Firefox. Les info-bulles ne se présentent pas dans IE6, assez curieusement, vous pouvez résoudre ce problème en donnant l'état de vol stationnaire de l'ancre une couleur d'arrière-plan ...

#tree-view a 
{ 
background-color:#ff0000; 
}

Je suppose qu'il a juste besoin d'avoir la mise en page, mais le zoom habituelle :1; ou position: relative; ne pas avoir le même effet

Vous pouvez remédier à la barre de défilement à l'aide ...

#tree-view 
{ 
overflow: display; 
}

Source

2010-08-11 15:25:17 michael

Voilà un bon conseil sur la couleur de fond dans IE6. Je n'ai pas encore eu l'occasion d'installer une machine virtuelle et de la tester dans ce navigateur.En ce qui concerne le débordement de la vue arborescente, je ne souhaite malheureusement pas afficher d'autre contenu de débordement à l'exception des info-bulles. – LandonSchropp

positionnement absolu et la barre de défilement dans Internet Explorer

Répondre

Questions connexes