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. Android中的onActivityResult和setResult方法的使用

    如果你想在Activity中得到新打开Activity关闭后返回的数据,你需要使用系统提供的startActivityForResult(Intent intent,int requestCode)方 ...

  2. SparkStreaming运行出现 java.lang.NoClassDefFoundError: org/apache/htrace/Trace 错误

    1.简介 最近在摸索利用sparkstreaming从kafka中准实时的读取数据,并将在读取的过程中,可以做一个简单的分析,最后将分析结果写入hbase中. 2.出现的问题 (1)将从kafka中读 ...

  3. Spearman秩相关系数和Pearson皮尔森相关系数

    1.Pearson皮尔森相关系数 皮尔森相关系数也叫皮尔森积差相关系数,用来反映两个变量之间相似程度的统计量.或者说用来表示两个向量的相似度. 皮尔森相关系数计算公式如下:

  4. entity framework 新手入门篇(2)-entity framework基本的增删改查

    经过前两节的简单描述,终于可以进入entity framework的使用部分了.本节将对entity framework原生的增删改查进行讲解. 承接上面的部分,我们有一个叫做House的数据库,其中 ...

  5. 自定义 placeholder 文本颜色

    原文  http://zhuyujia.github.io/2016/01/custom-placeholder-text-color.html Css: ::-webkit-input-placeh ...

  6. HttpContext的dynamic包装器DynamicHttpContext (附原代码)

    项目背景:在.net framework下使用asp.net webform,特别是aspx+ajax+ashx中,ashx后台代码获取传入参数的时候,需要很多[“…”],我用dynamic对他进行包 ...

  7. Linux系统性能分析

    http://c.biancheng.net/cpp/html/2782.htmlLinux系统性能分析 这篇教程的目的是向大家介绍一些免费的系统性能分析工具(命令),使用这些工具可以监控系统资源使用 ...

  8. MVC之路随记2--Razor基础

    1.概述:Razor是mvc 3.0新扩展的内容,是默认的视图引擎,引擎一词可理解为Web Form中<% %>中的变形,但是Razor更加干净,轻量级,简单.使用了该引擎后,文件的后缀名 ...

  9. 关于JAVA中对字符串与数组求长度的问题

    我在学习中发现在求数组或者字符串的长度的时候,用到length的时候,有时候是length,有时候是length(),很是奇怪,于是上API查了一下,发现一些小细节. 首先看看这段代码 public ...

  10. 软件工程总结(Final)

    又到了学期末了,此时此刻软件工程课业接近尾声了.时间过得太快,仿佛昨天这学期的课才开始, 开学时,老师让我们提出了不少对这门课的问题和疑惑,通过一学期的努力学习,我可以试着解开我自己的疑问了. 下面是 ...