为什么Modernizr不为我工作? [英] Why isn't Modernizr working for me?

查看:127
本文介绍了为什么Modernizr不为我工作?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我不认为modernizr喜欢我,有人可以告诉我我做错了什么。我似乎不能得到modernizr工作在firefox,ie等...我只使用元素,如页眉,页脚和导航...



这是我的代码:

 <!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 =descriptioncontent =/>
< link href =css / main.css =stylesheettype =text / css/>

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

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

< / head>

检查firebug它输出正常,我得到所有的元素,我应该,但没有一个元素正在工作...



例如,如果我在firebug中单击标题,并将CSS高度编辑为5000px,它不会移动, 。

解决方案

您可能忘记将新的HTML5元素设置为块级元素。默认情况下,浏览器会将任何未知的元素视为内联元素( display:inline ),这使得它们难以做到这一点。



新的浏览器正在慢慢将新的HTML5元素视为稳定版本,这意味着它们会为标题开始给予默认样式 display:block 元素。但是,目前市场上的大多数浏览器没有HTML5元素的默认样式,因此您需要提供它们。



这里是一个CSS示例

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

将CSS添加到main.css应该可以解决你的样式问题。 p>

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.

这篇关于为什么Modernizr不为我工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆