无响应的 UI 元素在调整大小后变得有响应

Question

我遇到了一个奇怪的 UI 错误，当我点击一个可能是下拉列表或按钮的元素时，它没有响应。如果我然后调整屏幕大小并再次单击该元素，它是响应式的。对于为什么或如何发生这种情况，我还没有找到一个很好的解释。它不会影响相关屏幕上的所有元素。 我有一个在 Rails 应用程序上使用 Bourbon SASS 的前端。在某些页面上，我有 jquery javascript，但在其他页面上，它只是 HTML 和 CSS。浏览器可以是 chrome 或 explorer。 我很感激对此问题的任何见解。如果我需要提供更多信息，请告诉我。

这是受影响的表单的一部分。除非我最大化屏幕，否则第二个下拉元素无响应。

<div class="send-invite-container">

  <%= form_for :send_invite, url: admin_send_invite_url do |f| %>
    <div class="field">
      <%= f.label "First Name" %>
      <%= f.text_field :first_name %>
    </div>

    <div class="field">
      <%= f.label "Last Name" %>
      <%= f.text_field :last_name %>
   </div>

   <div class="field">
     <%= f.label "Email" %>
     <%= f.text_field :email %>
   </div>

   <div class="field">
     <%= f.label "Client" %>
     <%=f.collection_select(:requested_organization, @client_collection, :name, :name)%>
   </div>

   <div class="field">
    <%= f.label "Associated Company" %>
    <%=f.select(:parent_role, options_for_select([["Company 1", "company_1"], ["Company 2", "company_2"], ["Other", "other"]]))%>
   </div>

   <div class="field">
     <%= f.label "Roles" %>
     <%= f.select(:requested_roles, Role::ROLES, {},
{ :multiple => true, :size => 6 }
) %>
   </div>

    <%= button_tag(type: "submit", class: "btn btn-success") do %>
      <i class="icon-leaf"></i> Send Invite
    <% end %>
  <%end%>

</div>

Answer 1

想通了。有一个 div 元素漂浮在选择框上。该元素是在布局 html 文件中定义的。