兼容性积累
设置字间距letter-spacing: ;
对于rem在p元素中失效的问题 可以:max-height:99999px;
Header nav search main side option footer
table tr td{border-collapse:collapse;}
Ctl+alt+n新建选区内容
(1) a span内联元素垂直居中 :line-height ; img及inline-block元素垂直居中:父元素行高=高;img{vertical-align:middle;}
(2) 图片垂直居中父元素:div{ display:table-cell;vertical-align:middle;}
(3) 兼容ie,firefox的line-height:hack
(4) 对于去除inline-block的默认间距,可以在父级设置font-size:0;
#menu { line-height: 23px; }
#menu { line-height: 26px\9; }
#menu { *line-height: 23px;+line-height:23px; }ie7
#menu { _line-height: 23px; }//ie6
(4)button和input作按钮的区别
<button id="btn" value=”test”>按钮</button>
$('#btn').val() 在ie8及以上获取的值是test 如果没有value值就为””;在ie7及以下获取的值是“按钮“
如果<button>放在了<form>标签中,点击这个button就变成了提交,相当于<input type="submit"/>
<input type="button">点击可以防止页面刷新,<button>点击会刷新页面
(5)input输入框的行高需要等于高,不然在ie7下会偏上;
做绝对定位的时候必须写上left=0,不然ie下默认是以父元素relative的最右边定位的
在ie7下不设置overflow-x:hidden;就x轴方向不会隐藏
(6)width:200px;/*对宽度的定义,根据情况修改*/overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
(8)两端对齐text-align:justify; text-justify:distribute-all-lines; text-align-last:justify;width:200px;//在200px的区域内扩散排布
(9)对于浮动元素,margin值会失效的问题,所以建议用padding
(10)word-spacing:5px; 字之间的空白区域的距离5px
(11)rgba兼容 background:rgba(227,227,227,0.9);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BFe3e3e3,endColorstr=#BFe3e3e3);
(12)opacity:0.8;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
(13) a span垂直居中:line-height; img:父元素行高=高;img{vertical-align:middle;}
浏览器兼容性
(14)兼容ie,firefox的line-height:hack
#menu { line-height: 23px; }
#menu { line-height: 26px\9; }
#menu { *line-height: 23px; }ie7
#menu { _line-height: 23px; }//ie6
(15)input输入框的行高需要等于高,不然在ie7下会偏上;
(16)做绝对定位的时候必须写上left=0,不然ie下默认是以父元素relative的最右边定位的
(17)在ie7下不设置overflow-x:hidden;就x轴方向不会隐藏
(18)兼容ie和主流浏览器的冒泡事件:window.event?window.event.cancelBubble=true:event.stopPropagation();
(19)display:inline-block;*display:inline;*zoom:1;
(20)清除浮动:
.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:''}
.clearfix{*zoom:1}