最近我们的项目选择用vue来做开发,在这个过程IE兼容性 首先我们按照步骤来安装vue-cli 创建项目运行 npm install npm run dev 然后我们在ie9下打开发现没有用但是vue官网告诉我们他是兼容ie9的 官网地址:https://github.com/vuejs/vue 下图是错误提示ie9:  然后就找资料查文档,总算给我找到了. 要实现其实很简单,只需要我们下载一个babel-polyfill, npm install babel-polyfill --save-d

js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位置集合.   执行 object.getBoundingClientRect();会得到元素的top.right.bottom.left.width.height属性,这些属性以一个对象的方式返回.   2.getBoundingClientRect上下左右属性值解释 主要是left和bottom要

第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/javascript"></script> <![endif]--> 现在再看,会出现一个黑漆漆的框框,说明IE8已经认识canvas标签了.但红圈圈还是没出来,下面状态栏仍然提示我们JS里压根没取到canvas.这说明IE还只是认识了canvas是个合法标签而已,至于怎么

http://blog.csdn.net/qdkfriend/article/details/7576524 Emoji表情符号兼容方案 一 什么是Emoji emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. emoji表情符号,在外国的手机短信里面已经是很流行使用的一种表情. 手机上如何使用emoji: 1.iphone.ipad系统:安装emoji free,再设置-通用-键盘-国际键盘-添加新的键盘,

看到 Android Weekly 最新一期有一篇文章:Tinting drawables,使用 ColorFilter 手动打造了一个TintBitmapDrawable,之前也看到有些文章使用这种方式来实现 Drawable 着色或者实现类似的功能.但是,这种方案并不完善,本文将介绍一个完美的后向兼容方案. 解决方案 其实在 Android Support V4 的包中提供了 DrawableCompat 类,我们很容易写出如下的辅助方法来实现 Drawable 的着色,如下: public

Emoji表情符号兼容方案 一 什么是Emoji emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. emoji表情符号,在外国的手机短信里面已经是很流行使用的一种表情. 手机上如何使用emoji: 1.iphone.ipad系统:安装emoji free,再设置-通用-键盘-国际键盘-添加新的键盘,然后把emoji添加在里面即可在发短信和一些输入文本的文本框中输入表情. IOS 5用户可直接从通用中添加em

localStorage是H5的存储方案,各大浏览器支持都相当不错,唯一悲催的就是IE,这个浏览器界的另类总是显得格格不入. IE “Internet选项”->“安全”中有一个“启动保护模式”的单选项,在选中的情况下localStorage是无法使用的,直接提示“拒绝访问”,就算不勾选,下次打开IE时也很有可能弹出“是否启用保护模式”的提示,此时除了做兼容没有更好的办法 兼容方案一:userData userData是IE专属的浏览器存储机制,注意IE8+不支持(你说悲催不悲催).userDat

CSS兼容方案,让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了. .e {/*FF OP*/ color: rgb(68, 68, 68); font-family: 'Hiragino Sans GB', Tahoma, Simsun, 'Microsoft Yahei';">} html* .e{/*Sa IE7 OP*/ color: rgb(68, 68, 68); font-family

Emoji表情符号兼容方案 一 什么是Emoji    emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. emoji表情符号,在外国的手机短信里面已经是很流行使用的一种表情. 手机上如何使用emoji: 1.iphone.ipad系统:安装emoji free,再设置-通用-键盘-国际键盘-添加新的键盘,然后把emoji添加在里面即可在发短信和一些输入文本的文本框中输入表情. IOS 5用户可直接从通用中添

移动端页面,需要复制一段文字码. 在ios中,长按文字区域,默认选中的范围,超出了我长按的文字区域, 把上面的图片和下面的另一个div的文字也给我包含进来了,并不是我想要的! 举个例子: 如下图: 1.我长按的区域是红色方框内的区域,想要复制框里的文字内容. 2.结果却是下图,即便 ios 上能再稍微操作一下.变成我想要的复制区域,但是这样用户体验太差 3.得想办法长按后 立刻变成如下图的情况 那么,想到了平时在其他站点上用到的一键复制,比如博客园的复制博客里的代码:  查了下有关页面复制功能,

css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样子写的. .transparent_class { /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good brow

前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: 在 Android 和 IOS 上,获知软键盘弹起和收起状态存在差异,且页面 webview表现不同. 在 IOS12 上,微信版本 v6.7.4 及以上,输入框获取焦点,键盘弹起,页面(webview)整体往上滚动,当键盘收起后,不回到原位,导致键盘原来所在位置是空白的. 在 IOS 上,使用第三

原贴地址:http://www.baidufe.com/item/60cd11d3bfdee5c51369.html 做前端的,对web界面基本都抠的很仔细,尤其精确到1px! 类似边距.宽度.高度等的,调整1px并不难,但是如果遇到不同字体的情况,要处理line-height,保证每种字体下,UI效果都非常美观,这就不是一件简单的事情了! 也许大家首先能想到的是,字体嘛,默认给页面body节点设置一个font-family列表即可: body { font-size: 12px; font-f

https://gitee.com/hustcc/placeholder.js巧妙的使用了canvas.toDataURL(),动态生成了一个背景图,可以作为兼容IE9-的placeholder方案.perfect!!!!! 基于这个可以对placeholder进行兼容,以下是扩展代码: /** * Created by Administrator on 2017/7/18 0018. * Time: 16:11 * https://gitee.com/hustcc/placeholder.js

前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: 在 Android 和 IOS 上,获知软键盘弹起和收起状态存在差异,且页面 webview表现不同. 在 IOS12 上,微信版本 v6.7.4 及以上,输入框获取焦点,键盘弹起,页面(webview)整体往上滚动,当键盘收起后,不回到原位,导致键盘原来所在位置是空白的. 在 IOS 上,使用第三

平时写HTML时多用class来命名,为很少用id来命名,主要原因就是class使用起来比较灵活. 但是万恶的JS在操作DOM的时候对ie6+只提供了getElementById和getElementsByTagName两个方法来查找DOM. 这时候就很尴尬了,就不得不在HTML里加入各种各样的id.看了就烦,不爽 Js有提供一个通过class名查找DOM的方法:getElementsByClassName(); 但是......只支持ie9+   -.-,哎呀好尴尬... 只好自己写一个兼容I

一般情况下的浏览器兼容需要考虑 IE6/7/8 三种 IE 版本,当然在 IE9 开始逐步推向市场后,又会有更多的衍生版本.所以我目前只考虑 IE7~9 版本的兼容情况.涉及到的条件注释代码如下: <!DOCTYPE html> <!--[if lt IE 7 ]><html><![endif]--> <!--[if IE 7 ]><html><![endif]--> <!--[if IE 8 ]><ht

根据canius(http://caniuse.com/#search=background-size),background-size兼容性为IE9以及以上浏览器,如下图所示. 实例代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>background-size 兼容性处理</title> &

首先,判断浏览器是否支持placeholder属性:目前经验来看placeholder属性在     IE10及以上   才能正常显示,而我们实际项目中往往要求兼容到   IE8 var input = document.createElement('input'); if("placeholder" in input){ alert('支持'); }else{ alert('不支持'); } (1)如果只需要让不支持placeholder的浏览器能够支持改功能,并不要求支持原生pla

最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit  Firefox  IE Element.requestFullscreen() webkitRequestFullscreen mozRequestFullScreen msRequestFullscreen Document.exitFullscreen() webkitExitFullscreen mozCancelFullScreen msExitFullscreen D

                     摘要: html5 video全屏实现方式 首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多 在html5中,全屏方法可以适用于很多html标签元素,不仅仅是video <!doctype html> <html> <head> <meta charset="utf-8" /> <title>全屏问题</title> <meta htt