I frequently encounter clients who are using a wide variety of Web Browsers… This is troublesom, as older browsers obviously don’t support the nice new shiny CSS3 features such as @media Queries.

So, I often need a way to tack on custom CSS styling specifically for older browsers such as IE8.

The WordPress Codex suggests one option;

Using with WordPress Themes

Add the appropriate conditional comment to your theme’s header.php file immediately after the call to the theme’s default stylesheet.

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][code language=”css”]
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url’); ?>"
type="text/css" media="screen" />
<!–[if lte IE 8]>
<link rel="stylesheet" href="<?php bloginfo(‘template_directory’); ?>/ie8.css"
media="screen" type="text/css" />
<![endif]–>
[/code]

Then upload your new IE-specific stylesheet (ie7.css in the example above) to your theme folder. You can now make changes to this new stylesheet and review the changes in IE without worrying about the impact on other browsers.

However, if you’re using a child theme, you’ll need to modify the pointer to your custom CSS to point to the stylesheet directory;

[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][code language=”css”]
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_directory’); ?>/ie8.css"
media="screen" type="text/css" />
[/code]

However, the bloginfo(‘stylesheet_directory’) call is now deprecated, and WordPress suggest you use get_stylesheet_directory_uri() instead;

[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][code language=”css”]
<link rel="stylesheet" href="<?php get_stylesheet_directory_uri(); ?>/ie8.css"
media="screen" type="text/css" />
[/code]

 [/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]