Internet Explorer specific styles Rails 5 Sass

Question

Internet Explorer as usual is giving me trouble with the padding of an element and it isn't centered vertically (Edge, Firefox, Chrome, Safari are all good).

I created a ie.sass file:

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

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

On my assets.rb file:

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

On my application.html.erb file:

<%= 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' %>

According to other answers, like this one this should be enough for it to display correctly, but IE still doesn't have my specific rules.

Any ideas? Thank you very much.

score 0 · Accepted Answer · edited May 23 '17 at 11:55

So since no one showed up to help, I decided to dig deeper. Instead of using CSS to target IE, I used JavaScript, following the ideas on this answer:

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');
    }

Seems to be working. I know this is more of a work around than a solution, if anyone can figure it out using just CSS please post below :)

Internet Explorer specific styles Rails 5 Sass

1 Answers1