flottant dans la liste provoque des problèmes dans IE6 et IE7

Question

J'ai une liste à bascule qui provoque des problèmes dans les anciens navigateurs IE, essayé de le réparer pendant quelques heures, mais j'ai échoué encore et encore. S'il vous plaît vérifier le code jsFiddle:

Structure

http://jsfiddle.net/vny63/

est similaire à ceci:

<li class="toggle"> 
    <a class="left" title="gallery">gallery</a> (English) 
    <span class="right float_right">3</span> 
    <ul style="display: none;"> 
     <li class="space_left"> 
     lot of stuff here 
     </li> 
    </ul> 
</li> 

Il fonctionne bien dans IE8 et Firefox3

Answer 1

IE6 a une chose où flotte seulement travailler si vous les marquez comme:

display: inline; 

Mais je suis sur mobile et ne peux pas vraiment tester maintenant.

Édition: IE6 a plusieurs "choses".

Answer 2

ici résolu: http://jsfiddle.net/vny63/11/:

HTML:

<h1>float_left only</h1> 
<div id="content" class="first"><ul><li class="toggle"><a title="Welcome" class="left">Welcome</a><span class="right float_right">1</span><ul class="sub" style="display: none;"><li class="space_left"><a title="Runter" href="index.php?parameter=admin/down/articles/1" class="down">Runter</a> • <a title="Anzeigen" href="index.php?parameter=home/welcome" class="view">Anzeigen</a> • <a title="Bearbeiten" href="index.php?parameter=admin/edit/articles/1" class="edit">Bearbeiten</a> • <a title="Nicht veröffentlichen" href="index.php?parameter=admin/unpublish/articles/1" class="unpublish">Nicht veröffentlichen</a> • <a title="Löschen" href="index.php?parameter=admin/delete/articles/1" class="delete">Löschen</a></li></ul></li><li class="toggle"><a title="comment-test" class="left">comment-test</a><span class="right float_right">2</span><ul class="sub" style="display: none;"><li class="space_left"><a title="Hoch" href="index.php?parameter=admin/up/articles/41" class="up">Hoch</a> • <a title="Runter" href="index.php?parameter=admin/down/articles/41" class="down">Runter</a> • <a title="Anzeigen" href="index.php?parameter=comment-test" class="view">Anzeigen</a> • <a title="Bearbeiten" href="index.php?parameter=admin/edit/articles/41" class="edit">Bearbeiten</a> • <a title="Nicht veröffentlichen" href="index.php?parameter=admin/unpublish/articles/41" class="unpublish">Nicht veröffentlichen</a> • <a title="Löschen" href="index.php?parameter=admin/delete/articles/41" class="delete">Löschen</a></li></ul></li><li class="toggle"><a title="gallery" class="left">gallery(English)</a> <span class="right float_right">3</span><ul class="sub" style="display: none;"><li class="space_left"><a title="Hoch" href="index.php?parameter=admin/up/articles/43" class="up">Hoch</a> • <a title="Anzeigen" href="index.php?parameter=gallery" class="view">Anzeigen</a> • <a title="Bearbeiten" href="index.php?parameter=admin/edit/articles/43" class="edit">Bearbeiten</a> • <a title="Nicht veröffentlichen" href="index.php?parameter=admin/unpublish/articles/43" class="unpublish">Nicht veröffentlichen</a> • <a title="Löschen" href="index.php?parameter=admin/delete/articles/43" class="delete">Löschen</a></li></ul></li></ul></div> 

<h1>float_right to article titles</h1> 

<div id="content" class="second"><ul><li class="toggle"><a title="Welcome" class="left float_left">Welcome</a><span class="right float_right">1</span><ul style="display: none;"><li class="space_left"><a title="Runter" href="index.php?parameter=admin/down/articles/1" class="down">Runter</a> • <a title="Anzeigen" href="index.php?parameter=home/welcome" class="view">Anzeigen</a> • <a title="Bearbeiten" href="index.php?parameter=admin/edit/articles/1" class="edit">Bearbeiten</a> • <a title="Nicht veröffentlichen" href="index.php?parameter=admin/unpublish/articles/1" class="unpublish">Nicht veröffentlichen</a> • <a title="Löschen" href="index.php?parameter=admin/delete/articles/1" class="delete">Löschen</a></li></ul></li><li class="toggle"><a title="comment-test" class="left float_left">comment-test</a><span class="right float_right">2</span><ul style="display: none;"><li class="space_left"><a title="Hoch" href="index.php?parameter=admin/up/articles/41" class="up">Hoch</a> • <a title="Runter" href="index.php?parameter=admin/down/articles/41" class="down">Runter</a> • <a title="Anzeigen" href="index.php?parameter=comment-test" class="view">Anzeigen</a> • <a title="Bearbeiten" href="index.php?parameter=admin/edit/articles/41" class="edit">Bearbeiten</a> • <a title="Nicht veröffentlichen" href="index.php?parameter=admin/unpublish/articles/41" class="unpublish">Nicht veröffentlichen</a> • <a title="Löschen" href="index.php?parameter=admin/delete/articles/41" class="delete">Löschen</a></li></ul></li><li class="toggle"><a title="gallery" class="left float_left">gallery (English)</a> <span class="right float_right">3</span><ul style="display: none;"><li class="space_left"><a title="Hoch" href="index.php?parameter=admin/up/articles/43" class="up">Hoch</a> • <a title="Anzeigen" href="index.php?parameter=gallery" class="view">Anzeigen</a> • <a title="Bearbeiten" href="index.php?parameter=admin/edit/articles/43" class="edit">Bearbeiten</a> • <a title="Nicht veröffentlichen" href="index.php?parameter=admin/unpublish/articles/43" class="unpublish">Nicht veröffentlichen</a> • <a title="Löschen" href="index.php?parameter=admin/delete/articles/43" class="delete">Löschen</a></li></ul></li></ul></div>​ 

CSS:

* { 
    border: 0; 
    color: #333; 
    font: 100 11px 'trebuchet ms'; 
    list-style: none; 
    margin: auto; 
    outline-style: none; 
    padding: 0; 
    text-align: left; 
} 

h1 {font-size:16px; margin-bottom:10px;} 

div { 
    overflow: hidden; 
} 

.space_bottom, .space_vertical { 
    margin-bottom: 10px; 
} 

.space_left, .space_horizontal { 
    margin-left: 10px; 
} 

.space_right, .space_horizontal { 
    margin-right: 10px; 
} 

.space_top, .space_vertical { 
    margin-top: 10px; 
} 

.float_left { 
    float: left; 
} 

.float_right { 
    float: right; 
} 

.first li {background:green} 
.second li {background:red;} 
a.left {float:left;width:80%} 
.sub {clear:left} 
​ 

JS:

$(document).ready(function() { 
    $('li.toggle ul,fieldset.toggle ul').hide(); 
    $('li.toggle a,fieldset.toggle legend').click(function() { 
     $(this).parent().siblings().children('.toggle ul').hide(); 
     $(this).siblings('ul').toggle(); 
    }); 
});