在列表中浮动会导致 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

IE6 有一个特点，即浮动只有在您将它们标记为时才有效：

display: inline;

但我正在使用移动设备，目前无法真正进行测试。

编辑：IE6 有几个“东西”。

Answer 2

在这里解决：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();
    });
});