一、html和css
各浏览器的默认内外边距不一致问题
最明显的是ul标签内外边距问题,ul标签在IE-7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。
解决办法：*{margin:0;padding:0;}
input 聚焦框颜色与样式不同
解决办法：使用outline:none，清除默认样式之后再统一设置
点击超链接后，hover、active 样式没有效果
解决方案：lvha的顺序来写
link:平常的状态
visited:被访问过之后
hover:鼠标放到链接上的时候
active:链接被按下的时候
cursor:hand在safari 、 ff下不支持
解决办法：统一用cursor:pointer
块级元素里面几个line-block类型元素并排会产生空白间距
解决方案：
父元素上设置 font-size:0
IE6 png背景图片不会透明
解决方案：使用png8或参考
IE6 双倍边距BUG，在块级元素浮动后本来外边距10px,但IE解释为20px
解决方案：_display: inline
IE6 3像素bug
浮动块元素与未浮动块元素处于同一行，有默认的3px间距
解决办法：将未浮动元素也变为浮动
IE6 img图片下方多出5px
解决方案：让图片变成块级元素
IE6 父元素postion:relative,子元素position:absolute时left和top失效
解决方案：1、给父层设置zoom:1触发layout。 2、给父层设置width
IE6-7 默认的div高度为一个字体高度,当div定义的高度小于字体高度时，div实际高度为字体高度
解决方案：
为这个容器设置下列属性之一
1、设置overflow:hidden;
2、设置line-height:1px;
3、设置zoom:0.08
IE6-7的宽高计算
宽高与w3c定义的不一致，以宽度为例，它包含了内容块宽度+padding宽度+border宽度
IE6-7 line-height 失效的问题
当一个容器里的文字与img、input、textarea、select、object等元素相连时，对这个容器设置的line-height数值就会失效
解决办法：在其中一个非文字的对象的样式中增加：
margin: (容器的line-height - 对象本身的高度)/2px 0;
vertical-align:middle;
IE6不支持min-width/min-height
解决方案：
min-height:200px; height:auto !important; height:200px;
IE6 不支持!important、不支持子选择器
IE6-7不支持display:table-cell
该属性一般用在垂直居中，可以使用其它解决方案
IE6不支持position:fixed
只使用使用position:absolute来模拟的话会出现滚动闪烁，需进一步处理，完整方案
IE6-9 和 Firefox 3 中a内部img元素默认的边框
img{ border:none;}
IE9以下浏览器不能识别css opacity属性
解决方案:使用ie的css透明度属性
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
ie9 以下浏览器对 html5 新增标签不识别的问题
解决方案：使用html5shiv.js
ie9 以下浏览器不支持 CSS3 Media Query
解决方案：使用respond.js
IOS横竖屏切换时字体自动缩放
例如竖屏状态下是14px，转换为横屏时就变成了20px
解决方案：-webkit-text-size-adjust: 100%IOS overflow: scroll滑动卡顿的问题
解决方案：-webkit-overflow-scrolling:touch
IOS输入框默认有内阴影
解决方案：input{ -webkit-appearance:none;}
触摸元素时产生半透明背景(IOS Android)
element{ -webkit-tap-highlight-color:rgba(255,255,255,0);}
伪类：active失效(IOS Android)
解决方案：
移动端1px边框问题
在移动端中，如果给元素设置一个像素的边框的话，那么在手机上看起来是会比一个像素粗。
解决方法：使用伪类元素模拟边框，使用transform缩放
.a::after{ content: ‘‘; display: block; width: 100%; height: 1px; background: #333; position: absolute;left: 0;bottom: 0; transform: scaleY(0.5) }
android 4.x 设置了border-radius和背景色时，背景色溢出到圆角之外
解决方案： background-clip:padding-box;
首次渲染CSS3动画时闪烁BUG
部分webkit内核手机浏览器在使用transform:translate或transition属性时，会出现闪烁现象
解决方案：
.css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
IOS input+fixed定位+软键盘问题
IOS8以下input元素使用了fixed定位，获取焦点弹出软键盘后，再滚动页面则该元素会随页面滚动
解决思路：把页面上需要滚动的区域移到一个容器中，然后对容器使用overflow-y:scroll来滚动
.main {
/* main绝对定位，进行内部滚动 */
position:absolute;
top:50px;
bottom:34px;
/* 使之可以滚动 */
overflow-y:scroll;
}
main .content {
