плавающий в списке вызывает проблемы в IE6 и IE7

Question

У меня есть список переключателей, который вызывает проблемы в старых браузерах IE, пытался исправить это в течение нескольких часов, но мне снова и снова не удавалось Пожалуйста, проверьте код jsfiddle:

http://jsfiddle.net/vny63/

структура похожа на это:

<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>

Хорошо работает в IE8 и Firefox3

Answer 1

решено здесь: 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();
    });
});

Answer 2

В IE6 есть функция, в которой плавающие элементы работают, только если вы отметите их как

display: inline;

Но я на мобильном и сейчас не могу тестировать.

Редактировать: IE6 имеет несколько "вещей".