您现在的位置是:首页 > 网站制作 > CSS3|Html5CSS3|Html5
HTML5网页如何让所有的浏览器都能识别语义元素标签样式
胜于蓝2019-11-05【CSS3|Html5】人已围观
简介浏览器对语义元素的支持情况如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这
浏览器对语义元素的支持情况
如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这样未来很长一段时间,HTML5的开发者将必须考虑向下兼容的问题。HTML5的标签或CSS选择器兼容性的做法有很多,其中自己生成标签元素就是一种。
为了让浏览器能识别html新标签并显示对应样式的效果有几种不同的办法:
一、不认识html5语义元素的浏览器不知道因为怎样把它们显示成块级元素,所以会把它们挤到一起。未解决这个问题,只要在样式表中添加一条超级规则即可。
article,aside,figure,figcaption,footer,header,hgroup,nav,section,
summary {
dispaly:blok;
}
PS:对于大多数浏览器,第一种技术可以解决问题。但这里的大多数并不包括IE8以及更早的版本。换句话说,对于较早版本的IE,还要面临一个挑战:他们会拒绝给无法识别的元素应用样式。好在有一个可以变通方案:通过JavaScript创建新元素,可以骗过IE,让它来识别外来元素,比如,下面的方法
二、脚本可以让IE识别并为<header>元素应用样式:
<script>
document.createElement('header')
</script>
三、实际上,你不用亲自写这些代码,只要在<header>区块中引用它即可,就像这样:
<head>
<title></title>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
...
</head>
PS:html5.js脚本应该是有条件执行的——只在你使用旧版本IE的情况下才会执行。为了避免不必要的加载js文件,可以像下面这样引用脚本代码放在IE的条件注释中
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
这样其他浏览器(IE9以及更高版本)就会忽略这行脚本,为你的页面节省毫秒的加载时间。
四、使用Modernizr,Modernizr会自动替你解决上述问题,不用使用html5.js或者样式规则。
1、打开www.modernizr.com,找到 Download Modernizr 区域,单击其中的Development按钮,下载Modernizr的js文件。
2、把下载到的js文件放到你的网页所在文件夹,例如js文件夹。
3、在页面<head>区块中添加对这个js文件的引用。
示例:
<head>
<meta charset="utf-8">
<title>Html5</title>
<!--[if lt IE 9]>
<script src="/skin/blog/js/modernizr.js"></script>
<![endif]-->
...
</head>
Tags:
很赞哦! ()
相关文章
随机图文
-
CSS 下拉菜单
使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。下拉菜单实例实例演示 1文本下拉菜单 实例演示 2下拉菜单 实例演示 3 基本下拉菜单当鼠标移动到指定元素上时,会出现 -
CSS3 画基本图形,圆形、椭圆形、三角形
CSS3 圆形 #css3-circle{ width: 150px; height: 150px; border-radius: 50%; background-color: #232323;} CSS3 椭圆形 #css3-elipse{ width: 200px; height: 100px -
四种常用方法 设置 不定/定宽高元素 在窗口/父元素中 水平垂直居中方法
一、定宽高元素在屏幕窗口水平垂直都居中,方法如下: 元素{ position: fixed; left: 50%; top: 50%; /*负值+宽的一半+单位*/ margin-left: -width/2+px; /*负值+高的一半+单位 -
HTML 颜色混搭
混搭两种颜色,并查看效果: 选择颜色: #FF0000 #0000FF 顶部颜色: #FF9999 #FF9C9E