Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

I don't think modernizr likes me, can someone please tell me what i'm doing wrong. I can't seem to get modernizr to work on firefox, ie etc... I'm only using elements like header, footer and nav...

This is my code:

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 lte9 lte8 no-js"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 lte9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="notie no-js"> <!--<![endif]-->
  <head>
    <title></title>
    <meta name="description" content="" />
    <link href="css/main.css" rel="stylesheet" type="text/css" /> 

    <script src="modernizr-2.0.6.min.js"></script>

    <script type="text/javascript" src="http://use.typekit.com/kmy1sfb.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>

  </head>

Checking firebug it outputs fine, I get all of the elements i'm supposed to but none of the elements are working...

For example if I click header in firebug and edit the CSS height to 5000px it doesn't move, also the alignment etc isn't correct.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
335 views
Welcome To Ask or Share your Answers For Others

1 Answer

You probably are forgetting to style the new HTML5 elements as block-level elements. By default, browsers treat any unknown element as an inline element (display:inline) which makes it difficult to do much with them.

Newer browsers are slowly treating the new HTML5 elements as stable, meaning they start giving them default styling like display:block for the header element, for instance. But, most browsers on the market today don’t have those default styles for HTML5 elements, so you’ll need to provide them.

Here’s a quick sample bit of CSS to do that:

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

Adding that CSS to your main.css should fix your styling issue.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...