html5新模块的兼容问题---------------------类似于bootstrap的
来源:互联网 发布:大司马淘宝店地址 编辑:程序博客网 时间:2024/06/14 21:59
HTML5 新模块元素的兼容问题
新增块元素的默认样式
下列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; *zoom:1;}
去除行内块元素之间的水平空隙方案
代码:
.display { inline-block; /* 此处原用于解决IE7兼容性问题,但是会导致background-image失效,请先忽略以下两条,实践中暂时没有发现IE7解决办法。若有发现请在留言处补充。谢谢! */ /* *display:inline; */ /* *zoom:1; */}
*关于inline-block的详细说明,点此详情。
*问题页面可参照本人从事的公司网站项目,IE7下样式有明显问题。- 音频模块兼容性问题
代码:
audio:not([controls]) { display: none; /*为防止在主流浏览器中出现“不带控制按钮的音频模块”这一问题。*/ height: 0; /*解决iOS5移动端显示多余高度的兼容性问题。 */ }
特殊模块样式处理
处理 不存在于 IE 8/9 的样式。代码:
[hidden]{ display:none;}
- 提高搜索优化
很多新增的HTML模块元素在搜索优化上也起到不可轻视的作用。
代码:
address { /* 屏幕阅读器和搜索引擎找到地址或电话号码,默认样式是 display: block */ display: block;}<address> <p>address:detail</p> <p> <a href="tel:+12233444">1223334444</a> </p> <p> <a href="mailto:address@mail.com">address@mail.com</a> /* 亦可标记电子邮件地址 */ </p></address>
Global 全局基本设置
- 默认字体设置,边距设置
代码:
html { font-family: sans-serif; /* 默认字体 */ font-size: 100%; /* 在用户调整窗口大小时,字体大小做相应调整。 */ -ms-text-size-adjust: 100%; /* IE浏览器 */ -webkit-text-size-adjust: 100%; /* FireFox浏览器 */ overflow-y: auto;}
- 去除默认边距
代码:
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";}q:before, q:after, blockquote:before, blockquote:after { content: ""; }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;}small { font-size: 85%;}strong { font-weight: bold;}em { font-style: italic;}cite { font-style: normal;}ul,ol { padding: 0; margin: 0 0 10px 25px;}dl { margin-bottom: 20px;}li { line-height: 20px;}dt,dd { line-height: 20px;}dt { font-weight: b d;}dd { margin-left: 10px;}
* 内嵌文本相关样式
代码:
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; /* 提高所有浏览器中的文本可读性和版式 */} table { /* 删除表格单元格之间的间距。 */ border-collapse: collapse; border-spacing: 0;}
Clearfix 可选全局样式
可兼容IE 6/7浏览器
代码:
.clearfix { *zoom:1}.clearfix:before,.clearfix:after { display:table; line-height:0; content:""}.clearfix:after { clear:both}*html .clearfix { zoom: 1;} /* IE6 */*:first-child+html .clearfix { zoom: 1;} /* IE7 */
0 0
- html5新模块的兼容问题---------------------类似于bootstrap的
- HTML5 新模块元素的兼容问题
- 浅谈HTML5新标签的浏览器兼容问题
- HTML5 新语义元素的浏览器兼容问题
- 怎么处理HTML5的新标签对IE浏览器兼容问题?
- html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
- 关于bootstrap 对于 IE9 的兼容问题
- bootstrap-datetimepicker的使用方法和兼容问题
- bootstrap-datetimepicker.js与IE8的兼容问题
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和HTML5?
- 浏览器对HTMl5新元素的兼容问题
- html5 bootstrap分页的应用
- html5的新特性
- html5的新特性
- HTML5的新特性
- HTML5的新特性
- HTML5的新特性
- bootstrap 源码解析-------------normalize.css v3.0.0 源码
- apache服务器的启动及安装目录文件用途
- c++常见面试题30道
- Chrome development tools学习笔记(2)
- oracle命令
- html5新模块的兼容问题---------------------类似于bootstrap的
- 关于数据库各种语句例子中的括号的含义
- android 创建窗口的过程
- dbca建库和连接
- java多线程(3)----阻塞队列
- 文本挖掘
- oracle左右连接的另一种显示方法—括号加号
- 简单的CSS重置reset
- 安卓蓝牙API(7)