Why isn't Modernizr working for me?

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.

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.

I had the same issue when I was trying to use a CDN and it wasn't working (I might have had the wrong link). The test I found was to put

.borderradius body {
  background: #c00;
}

in your main.css and see if the background turns red. If it is modernizr, is working.

EDIT: I've also found that the script must be inserted at the top of the HTML document. Putting it at the bottom, as suggested for better loading speed of pages, doesn't work.

来源：https://stackoverflow.com/questions/6625433/why-isnt-modernizr-working-for-me

标签

html

html5

css3

modernizr