0

For the twentythirteen, twentyfourteen or any theme made by Wordpress, editing ie.css which is in themefolder\css\ie.css doesn't result in any changes in Internet Explorer. I'm actually using IE11, but whatever I change the document mode or the user agent to, it's still not resulting to any changes.

I also noticed Wordpress injects ie class to the <html> tag when browsing from IE. So, I applied such CSS codes: .ie body { display: none !important; padding: 100px; }, but still no results.

2
  • Is ie.css loaded?
    – s_ha_dum
    Feb 14 '14 at 20:33
  • Yes, within <!--[if lt IE 9]> condition, and I'm using IE 11 with document mode and user agent as IE 8.
    – Ahmed Saad
    Feb 14 '14 at 20:58
1

Looks like TwentyFourteen includes the ie.css stylesheet within a 'less than IE 9' conditional tag, which would explain why it's not working for IE11.

<!--[if lt IE 9]>
   <link rel='stylesheet' id='twentyfourteen-ie-css'  href='http://localhost/wordpress_answers/wp-content/themes/twentyfourteen/css/ie.css' type='text/css' media='all' />
<![endif]-->

Sounds like you'll want to enqueue your own IE specific stylesheet. This is probably done cleanest from within a child theme, so you can update 2014 when possible.

You can use this code to enqueue your own IE specific stylesheet:

// Load the Internet Explorer specific stylesheet.
wp_enqueue_style( 'my-ie-styles', get_template_directory_uri() . '/css/my_ie_styles.css', array( 'twentyfourteen-style', 'genericons' ), '20131205' );
wp_style_add_data( 'my-ie-styles', 'conditional', 'IE' );

wp_style_add_data() will output the link tag within an IE specific conditional:

<!--[if IE]>
<link rel='stylesheet' id='my-ie-styles-css'  href='http://localhost/wordpress_answers/wp-content/themes/twentyfourteen/css/my_ie_styles.css' type='text/css' media='all' />
<![endif]-->
2
  • Weird, the changes are only applied when the document mode (from the developer options) is 9.
    – Ahmed Saad
    Feb 14 '14 at 21:14
  • 1
    @AhmedSaad Looks like MS dropped conditions comments as of IE10. You may want to consider using Modernizr feature detection rather than using IE specific conditionals.
    – sagalbot
    Feb 14 '14 at 21:22
2

The conditional stylesheet for IE is only loaded for IE6, 7 and 8 in the wordpress default themes. For every version after IE8, the theme's default stylesheet is loaded. You can add body classes for IE and then style your theme according to that

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.