Conditional IE8 style in original CSS file?

css, internet-explorer-8

Solution

You can either use a conditional html tag to add a class if the browser if IE and target via specificity, load an ie8 only stylesheet or use a CSS hack `\0/` to target IE8 only.

I suggest the head route if you only have a couple one-off issues in IE.

HTML Class Method

In your `HEAD`

<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

In your CSS

.ie8 #menu ul li {
    display:block;
    width:110px;
    padding:15px 10px 15px 10px;
    text-align:center;
    color:#000;
    text-decoration:none;
    font-weight:bold;
    background:#e5e5c3;
    }

IE8 only stylesheet method

Load AFTER your common shared styles.

<!--[if IE 8]><link href="/css/app-ie8.css" type="text/stylesheet"/> <![endif]-->

IE8 CSS hack

use \0/ directly after selector

#nav li ul  {
  left: -39px\0/ !important;
}

Problem

How can I override this styling for just IE8 browsers (I don't think I care too much for IE7 users anymore unless if the markup is very minimal)? ``` #menu ul { margin:0; padding:0; width:650px; } #menu ul li { display:inline-block; width:110px; padding:15px 10px 15px 10px; text-align:center; color:#000; text-decoration:none; font-weight:bold; background:#e5e5c3; } ``` Obviously, IE8 and below doesn't render display inline-block on li elements so how can I conditionally override this in this original CSS file?

Original source