时间戳

首页 > 解决方案 > 表单在 Safari 上无法正确对齐，但在 Chrome 上运行良好

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

问题描述

我有一个在 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%"

镀铬外观

镀铬外观

野生动物园外观

野生动物园外观

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

我怎样才能解决这个问题？

标签： htmlcssruby-on-railsruby-on-rails-4twitter-bootstrap-3

解决方案

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

推荐阅读