PC 端样式兼容

不同浏览器的标签默认的margin和padding不同

1
2
3
4
* {
  margin: 0;
  padding: 0;
}

图片加<a>标签在 IE9 中会有边

1
2
3
img {
  border: none;
}

IE9 以下浏览器不能使用opacity

1
2
3
opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

rgba不支持 IE8

可以用opacity,但是opacity会影响里面元素的透明度

1
2
eg:opacity:0.7;/*FF chrome safari opera*
filter:alpha(opacity:70);/*用了 ie 滤镜,可以兼容 ie*/

display:inline-block IE6/7 不支持

1
2
display: inline-block;
display: inline;

IE6 背景闪烁的问题

问题：链接、按钮用 CSSsprites 作为背景，在 ie6 下会有背景图闪烁的现象。原因是 IE6 没
有将背景图缓存，每次触发 hover 的时候都会重新加载
解决：可以用 JavaScript 设置 ie6 缓存这些图片：

1
document.execCommand('BackgroundImageCache', false, true)

块属性标签float后，又有横行的margin情况下，在 IE6 显示margin比设置的大

问题:IE6 中后面的一块被顶到下一行
解决方案：在float的标签样式控制中加入display:inline;将其转化为行内属性

设置较小高度标签（一般小于 10px），在 IE6，IE7 中高度超出自己设置高度

问题：IE6/7 里这个标签的高度不受控制，超出自己设置的高度
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度。
注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是 IE8 之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

input的placeholder会出现文本位置偏上的情况

input的placeholder会出现文本位置偏上的情况：PC 端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal

移动端样式兼容

ios 移动端click事件 300ms 的延迟响应

fastclick可以解决在手机上点击事件的 300ms 延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序为touchstart --> touchmove --> touchend --> click,
也可以通过绑定ontouchstart事件，加快对事件的响应，解决 300ms 延迟问题

一些情况下对非可点击元素如(label,span)监听click事件，ios 下不会触发

css 增加cursor:pointer

三星手机遮罩层下的input、select、a等元素可以被点击和focus(点击穿透)

有两种解决方案，
1.是通过层显示以后加入对应的 class 名控制，截断显示层下方可获取焦点元素的事件获取
2.是通过将可获取焦点元素加入的 disabled 属性，也可以利用属性加 dom 锁定的方式（disabled 的一种变换方式）

JS 兼容

event 事件问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//event 事件问题
document.onclick = function (ev) {
  //谷歌火狐的写法，IE9 以上支持，往下不支持；
  var e = ev
  console.log(e)
}
document.onclick = function () {
  //谷歌和 IE 支持，火狐不支持；
  var e = event
  console.log(e)
}
document.onclick = function (ev) {
  //兼容写法；
  var e = ev || window.event
  var mouseX = e.clientX //鼠标 X 轴的坐标
  var mouseY = e.clientY //鼠标 Y 轴的坐标
}

DOM 节点相关的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//DOM 节点相关，主要兼容 IE 6 7 8
function nextnode(obj) {
  //获取下一个兄弟节点
  if (obj.nextElementSibling) {
    return obj.nextElementSibling
  } else {
    return obj.nextSibling
  }
}
function prenode(obj) {
  //获取上一个兄弟节点
  if (obj.previousElementSibling) {
    return obj.previousElementSibling
  } else {
    return obj.previousSibling
  }
}
function firstnode(obj) {
  //获取第一个子节点
  if (obj.firstElementChild) {
    return obj.firstElementChild //非 IE678 支持
  } else {
    return obj.firstChild //IE678 支持
  }
}
function lastnode(obj) {
  //获取最后一个子节点
  if (obj.lastElementChild) {
    return obj.lastElementChild //非 IE678 支持
  } else {
    return obj.lastChild //IE678 支持
  }
}

设置监听事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//设置监听事件
function addEvent(obj, type, fn) {
  //添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为 false
  if (obj.addEventListener) {
    obj.addEventListener(type, fn, false) //非 IE
  } else {
    obj.attachEvent('on' + type, fn) //ie,这里已经加上 on，传参的时候注意不要重复加了
  }
}
function removeEvent(obj, type, fn) {
  //删除事件监听
  if (obj.removeEventListener) {
    obj.removeEventListener(type, fn, false) //非 IE
  } else {
    obj.detachEvent('on' + type, fn) //ie，这里已经加上 on，传参的时候注意不要重复加了
  }
}

阻止事件冒泡

1
2
3
4
5
6
7
8
9
//js 阻止事件冒泡，这里使用 click 事件为例
document.onclick = function (e) {
  var e = e || window.event
  if (e.stopPropagation) {
    e.stopPropagation() //W3C 标准
  } else {
    e.cancelBubble = true //IE....
  }
}

阻止默认事件

1
2
3
4
5
6
7
8
9
//js 阻止默认事件
document.onclick = function (e) {
  var e = e || window.event
  if (e.preventDefault) {
    e.preventDefault() //W3C 标准
  } else {
    e.returnValue = 'false' //IE..
  }
}