几个解决兼容IE678不支持html5标签的几个方法

2019-01-28 19:34:36王旭

这里要做一个特别的说明:就是IE特有的注释判断:
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! : 就是不等于的意思,跟javascript里的不等于判断符相同
因为IE9虽然支持html5标签,但支持的不是很完整,所以,也可以写"lte",这取决于你的选择!
当然,不要忘了指定新建标签的display属性,大多情况下我希望标签是block的:

复制代码

header,footer,article,aside,section,nav,menu,hgroup,details,dialog,figure,figcaption{display:block}

2、嵌套标签的方法
其实说白了就是在,语义化的html5标签内嵌套div等可用标签,然后只给div写样式,我是不赞成这样的写法的。这样做还不如,给标签一个有语义化的id或者class!

复制代码

<!--[if lt IE 9]>
<style>
body > * .section {
color: #ff0;
}
</style>
<![endif]-->
<style>
section .section { color: #f00;
}
</style>
<section><div class="section">内容测试...</div></section>

但如果类似于这样的结构,用用也无防:

复制代码

<nav >
<ul class="test">
<li></li>
<li></li>
<li></li>
</ul>
</nav>

3、IE条件注释

复制代码

<!--[if lt IE 9]><div class="section"><![endif]-->
<!--[if IE 9]><section class="section"><![endif]-->
<!--[if !IE]><!--><section class="section"><!--<![endif]-->
......
<!--[if lt IE 9]></div><![endif]-->
<!--[if IE 9]></section><![endif]-->
<!--[if !IE]><!--></section><!--<![endif]-->

再看一遍IE特有的注释判断:
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! : 就是不等于的意思,跟javascript里的不等于判断符相同
相信大家都明白,这是怎么回事!这是一个更加蛋疼的办法!大量的html代码使原本想语义化的代码更加混乱不堪。而且要对样式的书写也不利。