表单在 Safari 上无法正确对齐，但在 Chrome 上运行良好答案

【问题标题】：Form doesn't align properly on Safari but works well on Chrome表单在 Safari 上无法正确对齐，但在 Chrome 上运行良好
【发布时间】：2019-03-26 22:07:54
【问题描述】：

我有一个表单在 Chrome 上运行良好，但它 wrap 在我的 Ruby on Rails 应用程序中的 Safari 上运行。

这是代码

.panel.panel-primary
  .panel-heading
    h4.panel-title = t('admin.statistic.filter')

  .panel-body
    = form_for form_target, url: url, html: {method: :get, class: 'form-horizontal', :autocomplete => 'off'} do |f|
      .row
        .col.col-xs-3
          = f.datagrid_label :currency
          = f.datagrid_filter :currency, class: "form-control"
        .col.col-xs-3
          = f.datagrid_label :state
          = f.datagrid_filter :state, class: "form-control"
        .col.col-xs-3
          = f.datagrid_label :type
          = f.datagrid_filter :type, class: "form-control"
        .col.col-xs-6
          = f.datagrid_label :created_at
          .form-inline # This is what I used to make it work well on Chrome, but doesn't work on Safari
            = f.datagrid_filter :created_at, class: "form-control"
        .col.col-xs-2
          = f.submit t('datagrid.form.submit'), class: "btn btn-primary", style: "width: 100%"
        .col.col-xs-2
          = link_to t('datagrid.form.clear'), {:controller => 'admin/statistic/orders', :action => 'show'}, class: 'btn btn-primary', style: "width: 100%"

Chrome 外观

Safari 外观

.form-inline 是我用来让它在 Chrome 上运行良好，但在 Safari 上无法运行的原因

我该如何解决这个问题？

【问题讨论】：

标签： html css ruby-on-rails ruby-on-rails-4 twitter-bootstrap-3

【解决方案1】：

在引导程序中通读grid columns 后，我认为我的代码没有理由不能在两个浏览器上正常运行。问题在于 Safari 的计算方式不同。

所以，我发现 grid column 在 Bootstrap 3 中已经超过 12 列，在 Bootstrap 4 中已经超过 24 列。调整列后，我觉得应该更小，并扩展/增加换行到新行的部分的数量。它工作正常。

也就是说，我将下面sn-p中的这部分.col-xs-6增加为.col-xs-8，而我减少了其他部分：

.col.col-xs-8
          = f.datagrid_label :created_at
          .form-inline # This is what I used to make it work well on Chrome, but doesn't work on Safari
            = f.datagrid_filter :created_at, class: "form-control"

【讨论】：

【解决方案2】：

可能想检查https://browserstrangeness.bitbucket.io/css_hacks.html#webkit 显示可能有助于解决此问题的媒体查询

【讨论】：