CSSBug,CSSHackandFilter学习笔记1）CSSBug：不同浏览器解析CSS样式不一致，或者浏览时CSS样式不一样在浏览器中无法正确显示的问题称为CSSbug。2)CSSHack：在CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技术，因为它们都是非官方的个人CSS代码。修改或非官方补丁。有些人更喜欢用patch来描述这种行为。3）Filter：表示过滤器的意思，是针对特定浏览器或浏览器组显示或隐藏规则或语句的方法。从本质上讲，Filter是一种用于过滤不同浏览器的Hack。*使用Hack的一些副作用降低了CSS代码的可读性，增加了代码的负担。*通常有两种设计CSSHackandFilter的方法1）一种是利用浏览器自身的bug来隐藏或显示样式或声明；2）另一种是利用浏览器对CSS不完善的支持，比如一些规则或语法尚不支持隐藏或显示样式。IE61中常见的CSS解析bug和hack)ImagegapA)直接在元素中插入图片时，图片下方会出现3个像素左右的gap（IE6及以下版本出现此bug）hack1:Convert![]()
到块形状元素，将声明添加到![]()
:display:block;hack2:将img设置为vertical-align:top/middle/bottom;只要不是baseline2)Doublefloat(doublemargin)说明：当Ie6及以上解析浮动元素时，低版本浏览器会错误地将浮动边缘的显示加倍。Hack：向浮动元素添加一条语句：display:inline;3）默认高度（IE6）说明：在IE6及以下，部分块元素有默认高度（小于16px高度）hack1：给元素添加声明：font-size:0;hack2：给元素添加声明:overflow:hidden;4)百分比bug说明：IE6及以下解析百分比时，会四舍五入计算，导致50%加上50%大于100%的情况。Hack：给右边的浮动元素添加声明：clear:right;含义：清除右浮动。5）表单元素的高度和对齐方式不一致（IE、MOZ、C、O、S）问题描述：表单元素的行高对齐方式不一致hack：在表单元素中添加声明：float:left;或垂直对齐：顶部；2)表单元素中的按钮按照怪异框模型解析。3）使用边框：0；边框：无；直接去除表单控件的边框时；ie7以下浏览器不兼容。*透明书写1.opacity:0~1;IE8以上浏览器2.filter:alpha(opacity=1~100);IE9及以下浏览器6)列表阶梯BUG(IE6及以下浏览器中)bug1:float:leftisusedinthegivenchildelement;父元素中没有设置floating属性，li有类似梯子的效果。Hack：给父元素设置浮动可以解决这个问题。bug2：当LI中的A转为块元素并设置固定高度，并向父元素写入floating时，在IE6及以下版本的浏览器中会出现竖排显示。Hack：可以通过为a设置leftfloat来解决。8）鼠标指针bug描述：cursor属性的hand属性值只被IE浏览器识别，其他浏览器不识别该语句。cursor属性的pointer属性值被IE6.0及以上版本及其他核心浏览器识别。Hack：如果某个元素的鼠标指针形状统一为手形，需要添加语句：cursor:pointer;扩展内容：鼠标指针cursor:crosshair（十字）pointer（手形）move（移动）e-resize（左右方向）ne-resize（向右向上移动）nw-resize（向上向左移动）n-resize(向上移动)se-resize(向下和向右)sw-resize(向下和向左)s-resize(向下移动)w-resize(向左移动)text(文本)wait(等待状态)help(帮助)
