css hack

今天的课堂笔记主要是关于HTML5零基础需要学习和掌握的知识点。让我们一起来看看主要的培训课程:

1)CSS Bug:CSS样式在不同浏览器中不一致，或者说CSS样式在浏览器中无法正确显示的问题称为CSS Bug。

2) CSS Hack:在CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技能方法，因为它们都是个人对CSS代码的非官方修改或非官方补丁。有些人更喜欢用补丁来描述这种行为。

3)Filter:意为过滤器，是一种显示或隐藏特定浏览器或浏览器组的规则或语句的方法。本质上，Filter是一种用于过滤不同浏览器的黑客类型。

*使用Hack引起的一些副作用

它降低了CSS代码的可读性，增加了代码的负担。

*通常有两种方式来设计CSS Hack和Filter。

1)一种是利用浏览器本身的Bug隐藏或显示样式或语句；

2)另一种是利用浏览器对CSS不完善的支持，比如不支持某些规则或语法，来隐藏或显示样式。

IE6常见CSS分析Bug和hack

1)图像间隙

a)直接在元素中插入图片时，图片下方会产生3个像素左右的空隙(这个bug出现在IE6及更早版本)。

黑客1:威尔

#FormatImgID_0#转换为block元素，并在#FormatImgID_1#中添加声明:display:block；

　　hack2:将img设置vertical-align:top/middle/bottom;只要不为baselineHack2:设置img为vertical-align:top/middle/bottom；只要不是基线

2)双浮动方向(双边距)

描述:Ie6及更早版本的浏览器解析浮动元素时，会错误地双倍显示浮动边缘边界。

Hack:向浮动元素添加声明:display:inline；

3)默认高度(IE6)

描述:在IE6及以下版本中，一些块元素有默认高度(小于16px)。

Hack1:向元素添加声明:font-size:0；

Hack2:向元素添加声明:overflow:hidden；

4)百分比错误

说明:在IE6及以下版本中，解析百分比时会采用四舍五入的方式计算，导致50%加50%大于100%的情况。

Hack:给右边的浮动元素添加一个声明:clear:right；含义:清除右浮动。

5)表单元素的高度和对齐方式不一致(即MOZ、C、O、S)。

描述:表单元素的行高对齐不一致。

Hack:向表单元素添加声明:float:left；或垂直对齐:顶部；

2)表单元素中的按钮按照怪异的盒子模型进行解析。

3)直接移除表单控件边框时使用border:0；边框:无；与ie7以下的浏览器不兼容。

*透明书写

1 .不透明度:0 ~ 1；IE8以上的浏览器

2 .滤镜:alpha(不透明度= 1 ~ 100)；IE9和IE9以下的浏览器

6)列表阶梯错误(在IE6及更早版本的浏览器中)

Bug1:给定子元素中使用了Float:left；父元素里没有设置浮动属性，李阶梯效果。

Hack:将父元素设置为float可以解决这个问题。

Bug2:当LI中的A转换成block元素，并且设置了固定高度，父元素写浮动时，IE6及更低版本的浏览器会出现垂直显示。

Hack:可以通过设置一个左浮动来解决。

8)鼠标指针错误

说明:光标属性的手属性值只被IE浏览器识别，其他浏览器不识别。游标属性的指针属性值被IE6.0及以上版本和其他内核浏览器识别。

Hack:如果一个元素的鼠标指针形状统一为手形，那么应该加上语句:cursor:pointer；

扩展内容:

鼠标指针

光标:十字(十字)

指针(手形)

移动(移动)

e-调整大小(左右方向)

ne-调整大小(向右和向上移动)

西北-调整大小(向上和向左移动)

n-调整大小(上移)

se-调整大小(向下和向右)

SW-调整大小(向下和向左)

s-调整大小(下移)

w-调整大小(向左移动)

文本(文本)

等待(等待状态)

救命(救命)