首页 > 代码库 > 兼容性积累

兼容性积累

 

设置字间距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=http://www.mamicode.com/”test”>按钮

$(‘#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();

兼容性积累