css常用的问题/兼容性

常见的兼容性问题：

1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
解决方案： css 里增加通配符 * { margin: 0; padding: 0; }

2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
解决方案：给浮动元素添加display:inline;

3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

4、图片默认有间距
解决方案：使用float 为img 布局；

IE6被div包裹图片，距离div下线会有一个3px的空白，

解决方案：img{display:block;}变为块元素

5、IE9一下浏览器不能使用opacity
解决方案：
其他浏览器opacity: 0.5;取值范围0-1

ie浏览器  filter: alpha(opacity = 50);取值范围1-100

6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

7、cursor:hand 显示手型在safari 上不支持，IE上支持
解决方案：统一使用 cursor:pointer;

8、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative;

9.div里的内容，IE默认为居中，而FF默认为左对齐，可以尝试增加代码：

margin:0 auto;

10.如何定义1px左右高度的容器？

IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px

11.css做三角形

.caret {

      width: 0;

      height: 0;

      border-top: 4px solid #000;

      border-left: 4px solid transparent;

      border-right: 4px solid transparent;

}

12.透明度为0的兼容性写法

opacity:0;

-ms-filter: 'alpha(opacity=0)';

13.默认高度（IE6）

在IE6及以下版本中，部分块元素拥有默认高度（低于18px高度）

解决方式一：给元素添加：font-size:0;

解决方式二：给元素添加：overflow:hidden;

14.百分比bug

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

给右侧浮动元素添加：clear:right;

15.过滤器(filter)

15.1   下划线属性过滤器

当在一个属性前面增加一个下划线后，由于符合标准的浏览器不能识别有下划线的属性忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。

语法：选择器{_属性:属性值;}

15.2   *属性过滤器

当一个属性前面加了*后，该属性只能被IE7识别，其他浏览器忽略该属性的作用。

语法：选择器{*属性:属性值;}

16.图片下面多三个像素

img{
    vertical-align: middle;
}