pc端兼容问题
一:常见兼容性问题(不区分浏览器)
1.图片下间隙问题
现象:图片和父盒子有3px的间隙,并且间隙随着字体大小会发生变化,字体越大间隙越大
原因:图片具有文本属性,文本会以基线对齐属性,所以导致文字在下,图片在上,并且还有间隙
解决办法:
- 设置字体大小为0px
- 将图片转换为块元素(彻底取消基线对齐特征)
- 文本垂直方向对齐方式调整,vertical-align:top 顶线/中线 middle/基线baseline/底线bottom
2.行内元素并排中间间隙问题
解决办法:浮动实现并排
3.文本框与提交(普通)按钮对不齐现象
- 不用按钮,用a标签模拟按钮,js提交
- 按钮元素套div
<div>
<input type="buttom" value="登录" class="btn">
</div>
- 内减input元素的padding和border
二:IE浏览器常见兼容性问题处理
1、IE8及其以下,图片外套a链接时图片会有默认边框 100%
<a><img src=" "></a>
img{
verticla-align:middle/top/bottom; //取消图片下间隙 or display:block
border:none; //取消IE浏览器下图片边框
}
解决方法:设置img标签border:none
2、IE6下小高度问题(不超过10px高度的盒子 线)
原因:IE6有默认的行高,大约10px+,盒子被撑起来
解决方案:
line-height:0;
font-size:0;
overflow:hidden;
三、CSS hack
1.条件hack(html结构), IE10+废除条件hack, 性能不好
只有IE浏览器能看到这个元素 ,条件。
2、属性hack(单属性)
_ 属性名:属性值;IE6及其以下,浏览器会识别此属性。
*属性名:属性值;IE7及其以下,会识别。
\0 尾缀 属性名:属性值\0; IE8-IE9识别。
3、选择符级hack (类样式)
*html .box {} .box 只在IE6以及更早。
*+html .box {} .box IE7以及更早浏览器识别。
4、!important 权重最大的选择器 无限大
!important > 行内 > 文本内部 > id > class > 标签名 > *
id 100
class 10
标签 1
*0
.box .a {} 权重 10+10=20