leofontes leofontes - 9 months ago 74
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:

padding-top: 10px

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

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