解决ie低版本不认识html5标签
在不支持
HTML5
新标签的浏览器里,会将这些新的标签解析成行内元素(inline
)对待,所以我们只需要将其转换成块元素(block
)即可使用,但是在IE9
版本以下,并不能正常解析这些新标签,但是却可以识别通过document.createElement('tagName')
创建的自定义标签,于是我们的解决方案就是将HTML5
的新标签全部通过document.createElement
('tagName')来创建一遍,这样IE
低版本也能正常解析HTML5
新标签了。
处理方式:在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题(测试在IE下面的兼容性:ieTester软件的使用)
html5shiv
:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。
respond
:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
我们解决的问题, 主要是针对于ie
低版本的,也就是只有低版本ie
才执行才对。
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]—>
条件注释
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lte IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以下版本可识别 <![endif]-->
<!--[if gt IE 7]> IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
解决ie低版本不认识html5标签的更多相关文章
- 低版本浏览器支持HTML5标签的方法
最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...
- 解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js,以及excanvas.js解决低版本IE不支持canvas的问题
插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...
- 让低版本IE支持Html5的新语义标签
HTML5能为我们做的事儿很多,最为可口的就是语义化标签的应用,如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x,那这篇文章对你一定有用,因为现在你也可以在IE上用到HTML5. ...
- 解决用低版本的客户端ORACLE 12提示ORA-28040的异常
用低版本的客户端访问ORACLE 12,无法连接,提示信息为ORA-28040.解决办法如下: 1.把sqlnet.ora文件添加两行(或者修改),修改文件后直接生效,不需要重启服务和监听的: SQL ...
- 解决vue低版本安卓手机兼容性问题
低版本的安卓手机可能会白屏,是由新特性不支持引起的 解决代码es6新特性兼容问题 1,npm 安装 npm install babel-polyfill npm install es6-promise ...
- IE低版本下实现html5的placeholder(表单提示)功能
placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...
- 让低版本浏览器支持html5的标签
原理就是首先用js的createElement来创建,之后在使用 document.createElement('header'); <header> <hgroup>头部信息 ...
- vue解决IOS10低版本白屏问题
一.方案一 在build文件的webpack.prod.conf.js文件添加以下代码 new UglifyJsPlugin({ uglifyOptions: { compress: { warnin ...
- 解决ie 低版本的 background-size 兼容问题
在IE不支持这个属性的时候可以通过滤镜来实现这样的一个效果. div{background-size: cover;filter:progid:DXImageTransform.Microsoft.A ...
随机推荐
- 对DOMContentLoaded的研究 -----------------------引用
1. 什么是 DOMContentLoaded.打开 Chrome DevTools,切到 Network 面板,重新加载网页,得到如下截图: 标记 1 指向的蓝线以及标记 2 指向的蓝色字 “ ...
- 织梦dedecms自定义表单导出到excel教程
不写死任何字段,不写死任何东西,修改2个文件,让织梦自定义表单自由导出到Excel表格里. 添加教程 1.\dede\templets\diy_main.htm 找到 前台预览</a> 在 ...
- 【知识】定时器setTimeout/setInterval执行时this指针指向问题
[问题描述] setTimetout/setInterval中this指针指向window,以下是一个小demo: var demoChange = { key: true, changeFun() ...
- docker安装xxl-job
一 安装mysql root@localhost tmp]# docker run -itd --name xxl-mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD= ...
- Linux安装部署FTP服务器
Linux安装部署FTP服务器 本文章会将安装FTP服务器的步骤以及一些遇到的问题来记录下 因为项目中要与第三方对接数据,需要用到FTP服务器以提供他们每天上传数据,因为之前在本地的VMware虚 ...
- java-String与Integer的相互转化
一.Integer转String //方法一:Integer类的静态方法toString() Integer a = 2; String str = Integer.toString(a) //方 ...
- [LeetCode]-algorithms-Reverse Integer
Reverse digits of an integer. If the integer's last digit is 0, what should the output be? ie, cases ...
- 关于MySQL去除查询结果重复值
下面先来看看例子: table: id name 1 a 2 b 3 c 4 c 5 b 库结构大概这样,这只是一个简单的例子,实际情况会复杂得多. 比如我想用一条语句查询得到name不重 ...
- python连接字符串的几种方法--转子(香草拿铁的园子)
一. str1+str2 string类型 ‘+’号连接 >>> str1="Good" >>> str2="Luck" & ...
- leetcode-mid-sorting and searching -347. Top K Frequent Elements
mycode 71.43% class Solution(object): def topKFrequent(self, nums, k): """ :type nu ...