leofontes leofontes - 29 days ago 14
Sass (Sass) Question

Internet Explorer specific styles Rails 5 Sass

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.

Answer

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 :)