CSS中常见案例
1、图片间隙
div中的图片间隙
bug：在块元素中插入图片时，有时图片会将块元素下方撑大三像素。
hack：给<img>添加声明：display:block
2、表单元素行高不一致(IE,MOZ,C,O,S)
bug：表单元素行高对齐方式不一致
hack：给表单元素添加声明：float:left;
3、按钮元素默认大小及样式不一致
hack1： 统一大小及样式（用a标记模拟）
hack2：如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。
4、鼠标指针bug
描述：cursor属性的hand属性值只有IE8浏览器识别;
hack：如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;
5、透明属性
IE浏览器写法：filter:alpha(opacity=数值);取值范围 1-100(IE8以下)
兼容其他浏览器写法：opacity:数值;(数值的取值范围0-1,0.1,0.2,0.3-----0.9)
6、父元素里有块元素，如果给子元素添加添加margin-top,父元素会“掉”下来（高度塌陷）
hack1：给父元素添加overflow：hidden；
hack2：给子元素添加float；
hack3：给父元素加边框；
或者用其他的方法达到我们想要的效果：如给父元素加padding-top
7、双倍浮向（双倍边距）
描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边的边界加倍显示。
hack:给浮动元素添加声明：display:inline;
8、当li里的A加display:block或float:left时，出现行高不一致，有的会多出3像素
hack1：给a加display：inline-block;
hack2：给a加display：inline;
hack3：给li加float，再加宽度
9、万能清除浮动法
父元素选择符:after{content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden;}
10、行内块元素之间空白缝隙的问题
hack1：利用margin 负值，例如Margin-left:-8px;
hack2：把行内块写到一行上去
hack3：给父盒子加:font-size:0;
JS中常见案例
1、event事件
通用方式
document.onclick=function(e){
var e = e || window.event; //兼容写法
}
2、一些“方法”的兼容性写法
停止事件传播
if(evt.stopPropagation){
return evt.stopPropagation(); //一定不能漏下evt 方法前一定要写明对象
}else{
return evt.cancelbuble();
}
阻止默认事件
if (e.preventDefault) {
e.preventDefault(); //W3C标准
}else{
e.returnValue = 'false'; //IE
}
获取第一个子节点（next，last都类似）
if (obj.lastElementChild) {
return obj.firstElementChild; //非IE6/7/8支持
} else{
return obj.firstChild; //IE6/7/8支持
};
设置监听事件
//参数一：对象
//参数二：事件类型
//参数三：事件处理函数
function addEvent(obj, type, fn){
if (obj.addEventListener) {
obj.addEventListener(type, fn, false); //非IE
} else{
obj.attachEvent('on' + type, fn); //IE
}
}
3、通过className获取DOM节点
function getClassName(xxx){
var atag = document.all ? document.all : document.getElementsByTagName('*');
var arr = [];
for (var i = 0; i < atag.length; i++) {
var reg = new RegExp('\\b' + xxx + '\\b', 'g');
if (reg.test(atag[i].className)) {
arr.push(atag[i]);
}
}
return arr; //返回的也是数组，包含传入的class所有元素；
}
4、event.srcElement问题
IE：event对象有srcElement属性，没有target属性；
Firefox:even对象有target属性，没有srcElement属性。
srcObj = event.srcElement ? event.srcElement : event.target;
5、firefox与IE的父元素(parentElement)的区别
IE：obj.parentElement
firefox：obj.parentNode
hack：都使用obj.parentNode
6、在文档开始引用包含dom操作的js文件时，操作无效
当代码有dom操作，对于dom的操作必须在相应的dom加载完才能操作要不然$(selecter)会出会是个空的对象;
hack：含有dom操作的代码可以放到文档末尾，或者使用jquery.ready函数
移动端常见案例
1、部分情况下对非可点击元素如(label,span)监听click事件时，ios下不会触发
hack：css中增加cursor:pointer
2、底部输入框被键盘遮挡问题
var oheight = $(document).height(); //浏览器当前的高度
$(window).resize(function(){
if($(document).height() < oheight){
$("#footer").css("position", "static");
}else{
$("#footer").css("position", "absolute");
}
});
3、CSS动画页面闪白,动画卡顿
//使用综合属性
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
4、阻止旋转屏幕时自动调整字体大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
5、预加载、自动播放无效
自动播放的有效性受操作系统、浏览器（webview）、版本等的影响，苹果官方规定必须由用户手动触发才会载入音频，所以可以在用户依次输入后，让音频实现预加载:
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
6、ios safari时间显示问题
设置new Date日期格式的时候，在ios中的safari中发现显示效果与其他浏览器不一致。
只识别：new Date("year/month/day");
7、移动端300ms延迟。
hack1：一般在移动端用tap事件来取代click事件
hack2：fastclick可以解决在手机上点击事件的300ms延迟
8、手机上的flex布局时会有兼容性问题
.box{
display: -webkit-box; //老版本语法: Safari, iOS, Android browser, older WebKit browsers.
display: -moz-box; //老版本语法: Firefox (buggy)
display: -ms-flexbox; //混合版本语法: IE 10
display: -webkit-flex; //新版本语法: Chrome 21+
display: flex; //新版本语法: Opera 12.1, Firefox 22+
}
