html5boilerplate IE conditional not working

问题

Ok, this is the first time I am using html5boilerplate, but cant get the IE styles to work from my css file.

I have this in the header (as per page setting)

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
    <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>

and in my style sheet I have

#container { float:right; margin-top: 0px; }

.ie6 #container { margin-top: 5px; }

.ie7 #container { margin-top: 10px; }

.ie8 #container { margin-top: 15px; }

and it doesnt work. Is it really that simple, am I missing something.

Your advice is appreciated.

回答1:

Unless you're using some javescript shiv, then you should be using what's actually defined:

html class="no-js lt-ie9 lt-ie8 lt-ie7

So try,

#container { float:right; margin-top: 0px; }

.lt-ie7 #container { margin-top: 5px; }

.lt-ie8 #container { margin-top: 10px; }

.lt-ie9 #container { margin-top: 15px; }

回答2:

The CSS class names don't match. For instance, lt-ie8 in the conditional comment and ie8 in the style sheet.

One version I've used:

<!--[if lt IE 7 ]> <html class="no-js ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="no-js ie ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

Combined with CSS rules like:

.ie6 #container {...}
.ie7 #container {...}
.ie8 #container {...}

回答3:

I see classes in those conditional statements called "lt-ie7", "lt-ie8", and "lt-ie9", yet in your CSS I see you using classes named "ie6", "ie7", and "ie8", which are different. Try:

#container { float:right; margin-top: 0px; }

.lt-ie7 #container { margin-top: 5px; }

.lt-ie8 #container { margin-top: 10px; }

.lt-ie9 #container { margin-top: 15px; }

来源：https://stackoverflow.com/questions/10919480/html5boilerplate-ie-conditional-not-working

标签

css

internet-explorer

html5boilerplate