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