兼容性积累

 

设置字间距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}