Question

我的页面结构是这样的：

<header>
<div class="slide">
   <!---- some elements here --->
</div>
<nav>
    <ul>
        <li id="open"></li>
        <! --- other parts of the navigation ---->
    </ul>
</nav>
  </header>
   <div class="content">
     <!---- My content goes here ---->
  </div>
<footer>
  <!--- my footer elements --->
</footer>

当我点击带有id = open的li时，带有class = slide的div会向下滑动。用它推下整个标题，但内容div保持在标题的内容之上，即标题位于内容div之下。这个问题只出现在IE中，我尝试过以下css，但它不会改变IE中的任何内容。

CSS：

.content{display:block; clear:both; position:relative; top:0; right:0;}
.slide{display:none;background:#ddd;height:130px; width:100%; padding:20px;}
 header{background:#34759a; height:400px; width:100%;}

JQuery的：

$("#open").click(function(){
            $(".slide").slideToggle(300);
            return false;
       });

Answer 1

一些建议：

您可以尝试使用CSS3过渡而不是jQuery动画
而不是slideToggle()，您可以在css中为类幻灯片提供负margin-top，然后使用jQuery动画使用margin-top: 0设置$('.slide').animate({marginTop: 0})。
最后，如果有帮助，您只能为Internet Explorer运行代码。看看If Browser is Internet Explorer: run an alternative script instead。

Answer 2

由于标题的高度，它被设置为400px。我把它改为100％。现在IE正在表现！：）

CSS：

header{height:100%; width:100%;}

当另一个div在IE中滑落时，DIV没有被推倒

2 个答案: