Internet Explorer 特定样式 Rails 5 Sass答案

【问题标题】：Internet Explorer specific styles Rails 5 SassInternet Explorer 特定样式 Rails 5 Sass
【发布时间】：2017-03-10 03:27:55
【问题描述】：

像往常一样，Internet Explorer 在元素的填充方面给我带来了麻烦，并且它没有垂直居中（Edge、Firefox、Chrome、Safari 都很好）。

我创建了一个 ie.sass 文件：

.quemsomos-links-desktop-lattes
        padding-top: 10px

.quemsomos-links-desktop-linkedin
        padding-top: 10px

在我的 assets.rb 文件中：

Rails.application.config.assets.precompile += %w( ie.css )

在我的 application.html.erb 文件中：

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<!--[if IE]> 
  <%= stylesheet_link_tag 'ie', media: 'all', 'data-turbolinks-track' => true %> 
<![endif]-->
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

根据其他答案，like this one这应该足够它正确显示了，但是IE仍然没有我的具体规则。

有什么想法吗？非常感谢。

【问题讨论】：

标签： ruby-on-rails internet-explorer sass asset-pipeline ruby-on-rails-5

【解决方案1】：

因此，由于没有人来帮忙，我决定深入挖掘。我没有使用 CSS 来定位 IE，而是使用了 JavaScript，遵循了这个答案的想法：

How to detect Safari, Chrome, IE, Firefox and Opera browser?

var isIE = /*@cc_on!@*/false || !!document.documentMode;
    if(isIE) {
        $('.quemsomos-links-desktop-lattes').css('padding-top', '9px');
        $('.quemsomos-links-desktop-linkedin').css('padding-top', '9px');
    }

似乎工作正常。我知道这更像是一种解决方法而不是解决方案，如果有人可以仅使用 CSS 来解决它，请在下面发布:)

【讨论】：