解决方案:img{border:none;}
解决方案:可以用 opacity
eg:opacity:0.7;/*FF chrome safari opera*/
filter:alpha(opacity:70);/*用了 ie 滤镜,可以兼容 ie*/
但是,需要注意的是,opacity 会影响里面元素的透明度
display:inline-block
ie6/7 不支持解决方案:Display:inline-block;Display:inline;
随便写几个标签,不加样式控制的情况下,各自的 margin 和 padding 差异较大。解决方案:CSS 里*{margin:0;padding:0;}
问题:IE6 中后面的一块被顶到下一行
解决方案:在 float 的标签样式控制中加入 display:inline;
将其转化为行内属性
问题:IE6、7 里这个标签的高度不受控制,超出自己设置的高度
解决方案:给超出高度的标签设置 overflow:hidden;或者设置行高 line-height 小于你设置的高度。注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8 之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
问题:链接、按钮用 CSSsprites 作为背景,在 ie6 下会有背景图闪烁的现象。原因是IE6 没有将背景图缓存,每次触发 hover 的时候都会重新加载
解决:可以用 JavaScript 设置 ie6 缓存这些图片:
document.execCommand("BackgroundImageCache", false, true);
//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 节点相关,主要兼容 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 支持
}; }
//设置监听事件
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,传参的时候注意不要重复加了}; }
//js 阻止事件冒泡,这里使用 click 事件为例
document.onclick=function(e){ var e=e||window.event; if (e.stopPropagation) { e.stopPropagation();//W3C 标准
}else{ e.cancelBubble=true;//IE.... }
}
//js 阻止默认事件
document.onclick=function(e){ var e=e||window.event; if (e.preventDefault) { e.preventDefault();//W3C 标准
}else{ e.returnValue='false';//IE.. }
}
fastclick 可以解决在手机上点击事件的 300ms 延迟
zepto 的 touch 模块,tap 事件也是为了解决在 click 的延迟问题
触 摸事 件 的响 应顺 序 为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart 事件,加快对事件的响应,解决 300ms 延迟问题
解决方案:css 增加 cursor:pointer
。
有两种解决方案,
1.是通过层显示以后加入对应的 class 名控制,截断显示层下方可获取焦点元素的事件获取
2.是通过将可获取焦点元素加入的 disabled 属性,也可以利用属性加 dom 锁定的方式(disabled的一种变换方式)
input 的 placeholder 会出现文本位置偏上的情况:
PC 端设置 line-height 等于height 能够对齐,而移动端仍然是偏上,解决是设置 line-height:normal