Internet Explorer 特定样式 Rails 5 Sass

Question

像往常一样，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' %>

根据其他回答，这样应该可以正常显示了，但是IE还是没有我的具体规则。

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

Answer 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 解决这个问题，请在下方 post :)

Internet Explorer 特定样式 Rails 5 Sass

Internet Explorer specific styles Rails 5 Sass

internet-explorer

ruby-on-rails

sass

asset-pipeline

ruby-on-rails-5