Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/38.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 使用Chrome而不是Firefox的下拉菜单_Html_Css - Fatal编程技术网

Html 使用Chrome而不是Firefox的下拉菜单

Html 使用Chrome而不是Firefox的下拉菜单,html,css,Html,Css,我的标题中有一个下拉列表,在Chrome中可以正常工作。但当我使用firefox时,我可以点击按钮并显示下拉列表,但我无法点击其中的表单。当我试图点击实际的下拉列表时,它会简单地返回,就像我点击了其他地方一样 HTML <div class="dropdown" > <a id="welcome_dropdown_toggle" class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <str

我的标题中有一个下拉列表,在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 --> 
编辑1

所以为了修复它,我从div中删除了随机类和id。移动其中一个按钮后,下拉列表将显示为覆盖实际“登录”按钮的一部分。有趣的是,我可以点击覆盖按钮的下拉列表部分,但没有其他内容


提前感谢

好的,所以下拉列表下面的项目(全宽,几百像素高,有一个
位置:相对;
但没有z-index。当我将
z-index:1;
添加到它下面的div包装中时,我能够再次单击表单和完整的下拉列表

我觉得这有点奇怪,我能够看到下拉列表,所以我假设不需要z-index。另外,chrome和ff处理这种情况的方式也很有趣

     #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;
   }