可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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; }
