Question

我遇到了Firefox和下拉菜单的困难。它在slideToggle创建的下拉列表中有大约200 px的差距。检查时，该区域不被任何东西占用，并且完全空白/空。 Chrome会正确显示所有内容。

我已经打了2天了，已经玩了＃34;显示＆＃34;和＆＃34;保证金＆＃34;。

这是主要代码结构

JQuery CODE

<script type="text/javascript">
$(document).ready(function(){
    $(".plus1").click(function(){
        $(".open1").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});
</script>
<script type="text/javascript">
$(document).ready(function(){
    $(".plus2").click(function(){
        $(".open2").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});
</script>
<script type="text/javascript">
$(document).ready(function(){
    $(".plus3").click(function(){
        $(".open3").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});
</script>

HTML CODE

<html>
<head></head>
<body>
<div id="wrapper">
<div id="container">

<div id="ul_wrap">

<div class="plus1">
    <ul>
    <li>one</li><li>two</li><li>three</li>
    </ul>
    <p class="open1"></p>
    </div>

<div class="plus2">
<ul>
    <li>one</li><li>two</li><li>three</li>
    </ul>
    <p class="open2"></p>
</div>

<div class="plus3">
    <ul>
    <li>one</li><li>two</li><li>three</li>
    </ul>
    <p class="open3"></p>
</div>

    </div>
</div>
<div id="push"></div>
</div>
<div id="footer"></div>
</body>
<html>

CSS

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%; 
    margin: 0 auto -77px; 
    padding:0;
}
.footer, .push {
    height: 77px;
    clear:both;
}
.footer{
    width:100%;
    background: url('../images/bottom_bg.jpg') repeat-x 0 0;
    position:relative;
    margin:auto;
}
.container {
    width:800px;
    min-height:400px;
    margin:auto;
    margin-top:20px;
    margin-bottom:20px;
    padding:30px;
}
#ul_wrap {
    position:relative;
    margin-bottom:-100px;
    clear:both;
}
#ul_wrap ul{
    display:inline-block;
    position:relative;
    left:-20px;
    padding:5px 0px 0px 10px;
    background-color:#FFFFFF;
    border:1px solid #FFFFFF;
    clear:both;
    height:27px;
}
#ul_wrap li{
    font-size:16px;
    text-align:left;
    float:left;
    list-style:none;
}
.one{
    width:40px;
}
.two{
    width:410px;
}

.three{
    width:88px;
}
.open1, .open2, .open3{
    margin:-5px 0 20px 0;
    position:relative;
    font-size:12px;
    display:none;
}

请不要评论我忘记关闭标签或者SMTH，我不得不重写整个html代码，在短版本和短名称中发布它，否则它将是css html和javascript的4页代码。问题不在于调试未闭合标签或smth中的错误。来源被html验证了1000次。

Answer 1

在玩边距，显示属性以及浮动和清理后，我最终组装了一个工作结构（暂时）。

关键是要清除包含所有浮动元素的所有元素和父母，
然后因为一些奇怪的原因，如果只是使用内联块，那么slideToggle无法正常使用白色背景（除非你指定了隐藏元素的高度）.wrap_ul后面只有内联块。
使用显示：内联块，它在右侧浮动页脚，无论清楚：两个项目都是;
对于指定的高度，slideToggle没有将其余的滑动元素向下推，而是重叠。

仅仅在Firefox中存在所有这些问题，Chrome从来没有这个流程...... 所以我在最后一次编辑中发布了工作代码，不知道哪个属性让整个拼图工作了 - ＆gt; （

展开slideToggle列表背后的背景，
在列表展开时也被按下的页脚
没有浮动的页脚，下拉列表和页脚之间没有额外的间隙或间距）

希望你发现它有用

Firefox在slideToggle上创造了额外的差距

1 个答案: