html5新增加了一些语义元素,如header, footer, nav, aritcle, aside,等等。

然而,有些老款浏览器无法识别这些元素,会把它们当成 inline 元素对待,这会导致一些相当严重的样式问题。

解决办法:把这些语义元素全部声明为 块级(block)元素

header,footer,nav,article,aside,section{
display:block;
}

如果要兼容 ie9 之前的 ie 版本,还需要在文档中添加一点 javascript:

        document.createElement('header');
document.createElement('footer');
document.createElement('nav');
document.createElement('article');
document.createElement('aside');
document.createElement('section');

如何让老式浏览器支持html5新增的语义元素的更多相关文章

  1. 让旧浏览器支持HTML5新增标签

    首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素.   ...

  2. 老式浏览器支持html5和css3

    在IE页面的head标签里面加入   <!-[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/ ...

  3. 老式浏览器支持html5与css3

      html5低版本浏览器兼容方式 <!--[if IE]> <script src=”http://apps.bdimg.com/libs/html5shiv/3.7/html5s ...

  4. 老式浏览器兼容HTML5和CSS3的问题

      1.让老式浏览器支持HTML5   HTML5能为我们做的事儿很多,最为可口的就是语义化标签的应用,如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x,那这篇文章对你一定有用,因 ...

  5. 如何让旧浏览器支持HTML5新标签

    HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML ...

  6. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  7. 解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题

    https://www.cnblogs.com/yangjie-space/p/4816279.html html5shiv.js和respond.min.js 做页面常用的东西,写这里用的时候省点去 ...

  8. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  9. 如何让低版本IE浏览器支持HTML5标签并为其设置样式

    现代的浏览器都支持HTML5,HTML5定义了 8 个新的 HTML 语义元素.所有这些元素都是 块级 元素. 为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 ...

随机推荐

  1. easyUI类取嵌套的类型(pastJson结合)

    user类: @Entity@Table(name="c_user")public class User {      @Id @GeneratedValue(strategy=G ...

  2. Session Tracking Approaches

    cookies url rewriting hidden field see also: http://www.informit.com/articles/article.aspx?p=29817&a ...

  3. app的自动更新(调用DownloadManager)

    具体思路为:调用接口与服务器版本对比,当服务器版本号大于本地的,调用DownloadManager进行下载,之前也试过很多方法,但是兼容性都不是很好,还有一点要注意的是,在这里我并没有设置固定的下载路 ...

  4. 【Python】re正则表达式

    简单举几个常用的re正则表达式的例子: m = re.match("abc", "abcdef") print(m.group()) # 输出:abc m = ...

  5. 字符串处理——(第一次作业Draw输入命令处理部分升级)

    #include<iostream> #include<sstream> //使用istringstream必须包含的头文件 #include<string> #i ...

  6. Echarts 动态折线图

    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>< ...

  7. [GodLove]Wine93 Tarining Round #8

    比赛链接: http://vjudge.net/contest/view.action?cid=47644#overview 比赛来源: 2012 ACM/ICPC Asia Regional Tia ...

  8. [转]Mathematical Induction --数学归纳法1

    Mathematical Induction Mathematical Induction is a special way of proving things. It has only 2 step ...

  9. Newtonsoft.Json 处理多态类型的反序列化

    Newtonsoft.Json的序列化和反序列化很成熟也很好用, 最近在处理多态类型的反序列化中遇到了问题, 反序列化后只能到基类,而得不到也不能转换到子类.从网上查询了一番后,需要写一个创建类型的C ...

  10. guess number

    crossin的前面几章基本和LPTHW内容重合,因此我直接做了他前面的一个综合练习. 猜数游戏, 即系统随机记录一个数,根据用户猜的记录,如果正确则告知,且退出游戏,如不正确,则提示答案与用户输入的 ...