IE兼容 placeholder 属性

placeholder属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述)。该提示会在用户输入值之前显示在输入字段中。例如:

但是这是一个HTML5属性对IE的兼容特别不友好

于是,我们就可以自定义一个模拟placeholder效果的方法,如下代码:

border-radius是css3的属性,因此比较早的浏览器是不会支持该属性的,如何才能实现border-radius兼容老版本的浏览器呢?我们可以使用网上提供的一个插件来解决这个问题。

第一步:下载ie-css3.htc文件

http://files.cnblogs.com/aiyuchen/ie-css3.htc.zip

第二步:使用behavior通知浏览器调用脚本,代码如下:

Canvas实现图片圆角效果

本规则适用于各种Canvas绘制的规则或不规则图形。Canvas中有个名为createPattern的方法,可以让已知尺寸的图片元素转换成纹理对象,作填充用。

关于IE8以及以下版本不支持媒体查询的解决方案

1、加入代码

以解决IE8及以下不支持媒体查询。它通过js来hack IE浏览器。

实现思路

1.把head中所有

的css路径取出来放入数组

2.然后遍历数组一个个发ajax请求

3.ajax回调后仅分析response中的media query的min-width和max-width语法,分析出viewport变化区间对应相应的css块

4.页面初始化时和window.resize时,根据当前viewport使用相应的css块。

优点:压缩后仅1k,不跨域时性能ok,只需引入respond.js通用易用

缺点:仅支持media query的min-width和max-width(用于响应式够用);支持跨域,虽然配置有点麻烦,实现跨域代价高而且有闪屏体验欠佳。

滚轮事件

attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写obj.onclick=method。

相同点:

它们都是dom对象的方法,可以实现一种事件绑定多个事件处理函数。

不同点:

1.attachEvent是IE有的方法,它不遵循W3C标准,而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener,所以实际开发中需分开处理。

2.多次绑定后执行的顺序是不一样的,attachEvent是后绑定先执行,addEventListener是先绑定先执行。

3.绑定时间时,attachEvent必须带on,如onclick,onmouseover等,而addEventListener不能带on,如click,mouseover。这个区别在以上代码中可见。

4.attachEvent仅需要传递两个参数,而addEventListener需要传递三个参数,这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段:捕获阶段、目标阶段和冒泡阶段。顺序为:捕获阶段(根节点到子节点检查是否调用了监听函数)→目 标阶段(目标本身)→冒泡阶段(目标本身到根节点)。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。

获取样式

currentStyle属性和getComputedStyle属性不能设置属性,只能获取

currentStyle:该属性只兼容IE,不兼容火狐和谷歌

getComputedStyle:该属性是兼容火狐谷歌,不兼容IE

不同浏览器对DOM的支持程度

问题:在IE6-8中,对childNodes支持还是挺好的,相反其他浏览器会把文本节点和元素节点混淆,可用nodeType来鉴别。

JS:

此时的弹出框就会显示‘11’,比我们想要的‘5’,多出‘6’。

另外上面使用childNodes会出现问题,可用children来代替,只会出现我们想要的元素节点,不会出现兼容问题,所以上面因childNodes可以改为children:

此时弹出框显示的数字为‘5’,就是我们想要的结果。

children会只显示子节点。

总结:一些和兼容相关的工具/库:

lhtml5shiv

lRespond.js

lCSS Reset

lnormalize.css

lModernizr.js

lpostcss

特别是Modernizr.js和postcss很有实践价值,值得好好看看用法。

用到的网站:

lcaniuse.com查CSS属性兼容

lBrowserhacks查Hack的写法

要做好IE的兼容要有耐心,细心推敲琢磨,希望文章能给你带来启发!

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180706G0LZT700?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券