码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 新模块元素兼容问题

时间:2014-11-21 15:53:30      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:android   blog   http   io   ar   color   os   sp   java   

  • 新增块元素默认样式
    下列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 新模块元素兼容问题

标签:android   blog   http   io   ar   color   os   sp   java   

原文地址:http://www.cnblogs.com/Better-Me/p/4112964.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!