• 新增块元素默认样式
    下列HTML5新模块元素在IE8、9版本浏览器中没有被定义默认样式。为解决该问题,给下列元素添加“block”显示属性。

    代码:

    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    nav,
    section,
    summary {
    display: block;
    }
  • 特殊新增块元素
    下列HTML5新模块元素在IE8、9版本浏览器中没有被定义默认样式,考虑到其特殊性,特为下列元素添加“inline-block”显示属性。

    代码:

    audio,
    canvas,
    video{
    display:inline-block;
    }
  • 去除水平空隙方案

    代码:

    display:inline-block; *display:inline; *zoom:1;

    *关于inline-block的详细说明, 点此详情

  • 音频模块兼容性问题
    为防止主流浏览器中,显示“不带控制按钮的音频模块”这一问题。

    以及解决iOS5移动端显示多余高度的兼容性问题。

    代码:

    audio:not([controls]) {
    display: none;
    height: 0;
    }
  • 特殊模块样式处理
    处理 IE 8/9 中未定义的样式。

    代码:

    [hidden]{
    display:none;
    }

Global 全局基本设置

  • 默认字体设置,边距设置

代码:

html {
font-family: sans-serif; /* 默认字体 */
font-size: 100%; /* 在用户调整窗口大小时,字体大小做相应调整。 */
-ms-text-size-adjust: 100%; /* IE浏览器 */
-webkit-text-size-adjust: 100%; /* FireFox浏览器 */
}
  • 去除默认边距

代码:

body{
margin: 0; /* 外边距 */
padding: 0; /* 内边距 */
border: 0; /* 边框 */
}
  • 链接相关样式

代码:

a {
text-decoration: none; /* 去除默认下划线 */
} a:focus {
outline:thin dotted; /* 处理“outline”在Chrome浏览器中和其它浏览器之间的不一致 */
} a:active, a:hover {
outline: 0;
}
  • 排版相关样式

代码:

h1 { /* 使h1标签在section标签和article标签的留白和字体样式统一。可同时兼容Firefox 4+、Safari 5和Chrome等不同的浏览器 */
font-size: 2em;
margin: 0.67em 0;
} abbr[title] {
border-bottom: 1px dotted;
/* 解决首字母样式在IE8/9、Safari 5和chrome浏览器中未定义的问题 */
} b,
strong {
font-weight: bold; /* 添加加粗样式,应用于Firefox 4+、Safari 5和Chrome */
} dfn {
font-size:italic; /* 添加斜体样式,应用于Safari 5和chrome */
} hr { /* 解决其在Firefox中的兼容性问题 */
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
} mark { /* 解决其在IE8/9中样式未定义的问题 */
background: #ff0;
color: #000;
} code,
kbd,
pre,
samp { /* 更正关联字体在Safari 5和Chrome中的老式设置 */
font-family: monospace, serif;
font-size: 1em;
} pre { /* 提高pre标签格式化文本在所有浏览器中的可读性 */
white-space: pre-wrap;
} q { /* 设置相一致的引号类型 */
quotes: "\201C" "\201D" "\2018" "\2019";
} small { /* 统一所有浏览器中字体大小不一致的兼容性问题 */
font-size: 80%;
} sub,
sup { /* 在所有浏览器中,防止“sub”和“sup”标签影响“line-height”属性 */
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
} sup {
top: -0.5em;
} sub {
bottom: -0.25em;
}
  • 内嵌文本相关样式

代码:

img {
border: 0; /* 在IE8/9浏览器中,当img标签中包含a标签时,去除img边框属性。 */
} svg:not(:root) {
overflow: hidden;
}
  • 图片特写相关样式
    "figure"标签规定独立的流内容(图像、图表、照片、代码等等)

    代码:

    figure {
    margin: 0;
    }
  • 表单相关样式

代码:

fieldset { /* 定义一致的边框、内边距和外边距 */
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
} legend {
border: 0; /* 更改“color”属性在IE8/9浏览器中没有被继承的问题 */
padding: 0; /* 去除外边距,如此即使人们将字段集归零也不会失去样式 */
} button,
input,
select,
textarea {
font-family: inherit; /* 更改关联字体属性在IE8/9浏览器中没有被继承的问题 */
font-size: 100%; /* 更改字体大小属性在IE8/9浏览器中没有被继承的问题 */
margin: 0; /* 调整边距设置在Firefox 4+, Safari 5, 和 Chrome浏览器中的兼容性问题 */
} button,
input {
line-height: normal;
/* 调整Firefox 4+浏览器下,客户端样式表中设置了“!important”的“line-height”属性的input表单 */
} button,
select {
text-transform: none;
/**
* 调整“button”和“select”的“text-transform”继承不一致性的问题
* 其他表单控件元素不继承“text-transform”属性
* 修正“button”标签在Chrome, Safari 5+, and IE 8+中的样式继承问题
* 修正“select”标签在Firefox 4+ 和Opera中的样式继承问题
*/
} button,
html input[type="button"], /* 避免webKit bug发生在Android 4.0.* 设备上,破坏原生“audio”和“video”控制组件 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 改正iOS设备中“input”类型表单样式不可用的问题 */
cursor: pointer; /* 增强光标样式在input表单和其他表单的可用性和一致性 */
} button[disabled],
html input[disabled] {
cursor: default; /* 为禁用表单重设定默认光标样式 */
} input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 调整IE 8/9中尺寸属性设置为“内容框”的盒子模型 */
padding: 0; /* 去除IE 8/9中的多余的外边距留白部分 */
} input[type="search"] {
-webkit-appearance: textfield; /* 兼容Safari 5 and Chrome上 “searchfield” 上设置 “appearance”属性 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 兼容Safari 5 and Chrome上 “border-box” 上设置 “box-sizing”属性 */
box-sizing: content-box;
} input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; /* 去除OS X系统上Safari 5和Chrome中容器内边距和搜索取消按钮属性 */
} button::-moz-focus-inner,
input::-moz-focus-inner { //Firefox 4+浏览器中,去除容器内边距和边框属性
border: 0;
padding: 0;
} textarea {
overflow: auto; /* IE 8/9中,去除默认垂直滚动条属性 */
vertical-align: top; /* 提高所有浏览器中的文本可读性和版式 */
}

HTML5 新模块元素兼容问题的更多相关文章

  1. HTML5新特性:元素的classList属性与应用

    在html5新增的classList之前, 操作元素的class用的是className这个属性,而如果要向jquery封装的hasClass, removeClass, addClass, togg ...

  2. 【html5】解决HTML5新标签不兼容的问题

    html5标签: 1.语义化好 -> SEO a). 程序交流方便 b). 搜索引擎友好 baidu -> 不认识 google 2.本身不兼容,想兼容低版本,请使用如下方法: 方式一:使 ...

  3. 让IE6,7,8支持HTML5新标签的方法

    很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签.考虑到目前win7自带的IE浏览器版本是IE8,而IE8不支持HTML ...

  4. html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

  5. html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  6. 【转】HTML5新增元素兼容旧浏览器方法

    ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...

  7. html5有哪些新特性?如何处理html5新标签的浏览器兼容问题?如何区分html和html5?

    h5新特性: 语义化标签:<hrader></header> .<footer></footer>.<nav></nav>.&l ...

  8. 【HTML5】如何处理HTML5新标签的浏览器兼容版问题

    HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...

  9. 读书笔记:《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

随机推荐

  1. Delphi txt文件读取及写入

    简介:Delphi支持三种文件类型:文本文件.记录文件.无类型文件.文本文件的读...   在进行win32开发中对文件的读写是最常用的操作之一 Delphi 支持三种文件类型:  文本文件.记录文件 ...

  2. ElasticSearch再学习

    ElasticSearch参数详解 本次使用的windows的版本,如若Linux移步:https://www.cnblogs.com/msi-chen/p/10335794.html 配置文件参数 ...

  3. Go 逻辑运算符

    Go 逻辑运算符 package main import "fmt" func main() { var a bool = true var b bool = false if ( ...

  4. bzoj1003题解

    [题意分析] 给你一张无向图,固定起点和终点,除这两点外每个点都有可能消失一段时间(保证起点和终点相互可达),每天选择的路径总长,以及对路径的修改都有代价,求给定时间内最小代价保证起点终点始终连通. ...

  5. HBase的应用场景及特点

    一.Hbase能做什么?1. 海量数据存储:上百亿行 x 上百万列并没有列的限制当表非常大的时候才能发挥这个作用, 最多百万行的话,没有必要放入hbase中2. 准实时查询:百亿行 x 百万列,在百毫 ...

  6. 2019年12月12日英语学习-Will I Or Won't I ?For Since

    没办法,听不懂,记不住.就会一句.艹

  7. (转)当android调试遇到ADB server didn't ACK以及顽固的sjk_daemon进程 .

    转:http://blog.csdn.net/wangdong20/article/details/20839533 做Android调试的时候经常会遇到,程序写好了,准备接上手机调试,可不一会儿出现 ...

  8. JDK 安装步骤

    1.JAVA_HOME  =  JDK安装路径 2.  Path  =  %JAVA_HOME%\bin; 3.  CLASSPATH   =  .;%JAVA_HOME%\lib\dt.jar;%J ...

  9. kafka集群配置总结

    虽然很简单,但会遇到很多奇怪的坑,而且网上解决方法搜不到. 首先下载kafka包,解压缩后,修改conf/server.properties文件,基本配置项如下(省略了部分默认配置项 : broker ...

  10. Go kit 概览

    该篇为翻译文:原文地址 https://github.com/go-kit/kit Go kit 是一个语言工具包,用于在GO 语言中构建微服务.我们可以解决分布式系统和应用程序架构中的常见问题,因此 ...