2

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?

4

2 回答 2

6

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;
}
于 2013-08-06T17:27:16.613 回答
1

How about using separate style sheet for this. or either you can use embedded styles in html as follows

<!--[if gte IE 8]>
<style>
#menu ul li{
....
}
</style>
<![endif]-->

or

<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="{path to your ie-8 override css}" />
<![endif]-->

There is a another hack mentioned here.

于 2013-08-06T17:39:18.410 回答