过滤器

1、下划线属性过滤器

   

在属性前加下划线（_）

    由于符合标准的浏览器不识别而忽略，但低版本会解析

 

2、!important关键字过滤器

   

属性:属性值!important

        所附加的声明具有最高权重，优先解析，但IE6及更低版本不识别，所以用来兼容IE6和其他标准浏览器

 

3、其他过滤器

    1）\9           IE浏览器组

    2）\0           IE8（包括IE8）

    3）+*          IE7以下（包括IE7）

    4）：root    除了IE8及更早

 

最小高和高度自适应引发的兼容

1、min-height：value；_height：value；   

IE6中，最小高=高

2、

min-height：value；height：auto!important；height：value;   

不能换顺序

 

常见的兼容和解决办法

一、图片兼容问题（所有行内元素和行内块）

    1、图片向下撑大3像素

       

display：block；

    2、图片水平排列时有间距

       

img（float：left）

    3、添加超链接后，图片在IE中有蓝色边框

       

border：0或者none

   

4、图片格式：png24在IE6中不透明

        解决不了，用png8

 

二、表单兼容问题

    1、表单距离顶部间距不一致

       

给表单元素加浮动

    2、按钮大小不一致

       

1）用超链接a模拟

        2）用背景图写样式

        3）在input里加标签写样式

    3、input类型是text时，且用value写文字，其他浏览器居中，IE6在顶部

       

行高=高

    4、在IE6即更低中，去掉input边框

       

border：0  

        outline:none   去掉蓝色框  

 

其他兼容问题

1、双倍浮动间距（IE6）

    一个居（左或者右）浮动的元素放进一个容器里，并在浮动元素上使用了左或者右边距（

只是第一个元素或者最后一个元素）

    解决

      

 

给浮动元素加 display：inline    left给第一个元素加，right给最后一个元素加

2、默认高度（IE6、7）

    部分块一般低于18px

   

1）font-size：0

    2）overflow：hidden

3、百分百bug（IE6以下，50%+50%>100%）

    给右边浮动元素加 clear：right

4、鼠标指针（改变其样式）

   

cursor：pointer（小手）    move（移动）    wait（等待）    help（帮助）

5、子元素不浮动，加margin-top时，父元素会下去

    1）给父元素加overflow：hidden

    2）给子元素或父元素加浮动

    3）给父元素加透明边框    rgba或者stransparent

6、当li里的a转成块元素，且浮动给a但不给li时，出现li独占一行或阶梯状

   

li和a都浮动

7、文字大小（谷歌）

   

临界点在12px，再小就不生效了

8、IE6中不认识display：inline-block

   

1）既横着又设置宽高    给浮动

    2）横着               display：inline

9、多行文本显示省略号

   

不兼容，且解决不了

10、渐变

　

不兼容IE，且解决不了