相关疑难解决方法(0)

我正在使用Bootstrap 2.3.1 http://twitter.github.io/bootstrap/index.html

所以我正在使用他们的"下拉菜单"类来创建一些简单的快速使用下拉菜单,但由于某些原因,在IE7上,它们出现在我网站上的文本和其他元素后面.

测试链接: http ://leongaban.com/_projects/defakto/CDS/

我在我的CSS中添加了z-index,但似乎仍然没有做任何事情,请帮忙!

.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
    z-index: 10000;
}

IE9,Chrome,FF等现代无头痛的浏览器:

IE7> :(

HTML

<div class="header-nav">

<ul id="nav-account" role="navigation" class="pull-right">

    <!-- Language Dropdown Button -->
    <li id="language-btn">
        <a href="#" id="drop1" class="dropdown-toggle" data-toggle="dropdown">English</a>
        <img src="img/header-small-down-arrow.png" alt="grey triangle"/><!-- <span class="grey_triangle"></span>-->

        <!-- Language Dropdown Menu-->
        <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">English</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Spanish</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">German</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Japanese</a></li>
            <li …

http://bassistance.de/jquery-plugins/jquery-plugin-validation/看起来是最好的jquery验证插件.我似乎无法让它在jQuery UI对话框中工作.

此代码在对话框DIV之外工作:

<script type="text/javascript">
$(document).ready(function() {
     $("form").validate();
     $("a").bind("click", function() { alert($("form").valid()); });
});
</script>

<form method="get" action="">
   <p>
     Name
     <input id="name" name="name" class="required" minlength="2" />
   </p>
   <p>
     E-Mail
     <input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <a href="#" id="clickTest">Click</a>
</form>

这非常有效.当我将表单移动到我的对话框div中时,打开对话框,然后单击它返回true的链接,没有bueno.

有没有办法使用这个杀手jquery验证插件而不必使用<form>标签？或者有更好的方法成功地做到这一点？

我有一些div框,在悬停时应该显示一个语音框.使用jQuery和CSS,这不是什么难事.

但是,弹出语音出现在IE7中的邻居div下 - 我不能让它出现在它下面(见镜头).

我尝试在不同的地方玩z-index但没有成功.

FF 替代文字http://img134.imageshack.us/img134/5314/63386894.png IE7 替代文字http://img396.imageshack.us/img396/9329/95483890.png

HTML

<div class="boardshot_list">
    {% for ... %}

    <span class="img_box">
        <a  href="/site_media/xxx" target="_blank">
            <img class="trigger" src="xxx" alt="{{ item.title }}" />
        </a>

  <div class="container_speech_box popup">
   <div class="two">
    <b class="tl"><b class="tr"></b></b>
     <p>
     blabla
     </p>
    <b class="bl"></b><b class="br"><b class="point"></b></b>
   </div>
  </div>

 </span>


    {% endfor %}

    </div>

CSS

div.boardshot_list span.img_box {
 display:block;
 width:220px;
 height:180px;
 float: left;
 margin: 0 10px 10px 0;
 position: relative;
}
img.trigger{
 border:1px solid #373743;
}
div.popup
{
    display: none; 
    position: absolute; 
 z-index: …

当我将鼠标放在下拉菜单上时,我创建了这个css3下拉菜单,它出现在图像后面,我试图找出它.但不能为我的生活.任何帮助都非常明确,你可以在这里看一看.