我的页眉中有一个下拉菜单,它在 Chrome 中运行良好。但是当我使用 firefox 时,我可以点击按钮并显示下拉菜单,但我无法点击里面的表格。当我尝试点击实际的下拉菜单时,它只会返回,就好像我点击了其他地方一样。
HTML
<div class="dropdown" >
<a id="welcome_dropdown_toggle" class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<ul id="welcome_page_dropdown" class="dropdown-menu dropdown-nav pull-right " >
<%= form_for(:user, url: session_path(:user), :html => {:class => 'form-group login-name', :role => 'form'}) do |f| %>
<div class="form-group login-name">
<div class="input-group " style="margin-bottom: 12px;">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<%= f.email_field :email, :class => 'form-control', :placeholder => 'Email', :type => 'text' %>
</div>
<div class="form-group login">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<%= f.password_field :password, autocomplete: "off", :class => 'form-control', :placeholder => 'Password', :type => 'password' %>
</div>
</div>
<label class="string optional remember-text" for="user_remember_me">
<%= f.check_box :remember_me %> <%= f.label :remember_me %>
</label>
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
<%= link_to 'Forgot Email/Password?', new_password_path(:user) %>
</div>
<% end %>
</ul> <!--dropdown-menu -->
</div> <!-- dropdown -->
CSS
#welcome_dropdown_toggle{
margin-right:15px;
float: right;
height: 50px;
width: 150px;
border-radius: 6px;
border: none;
background-color: white;
font-size: 25px;
font-weight: bold;
text-align: center;
padding: 8px;
}
#welcome_dropdown_toggle:hover{
color:#2b2625;
}
#welcome_page_dropdown{
padding: 15px;
padding-bottom: 15px;
margin-top: 70px;
margin-right:15px;
}
编辑 1
因此,为了修复它,我从 div 中删除了随机类和 ID。移动其中之一的结果是,下拉菜单将覆盖实际“登录”按钮的一部分。有趣的是,我可以点击覆盖按钮的下拉菜单部分,但别无其他。
提前致谢
最佳答案
好的,所以下拉列表下方的元素(全宽和几百像素高,有一个 position:relative;
但没有 z-index。当我添加 z-index :1;
到它下面的 div 的包装器,我能够再次单击表单和完整的下拉菜单。
我觉得这有点奇怪,我能够看到下拉菜单,所以我认为不需要 z-index。 chrome 和 ff 以不同方式处理这种情况的事实也很有趣。
关于html - 下拉菜单在 Chrome 而不是 Firefox 中工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35934492/