css兼容问题

1.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，IE  Chrome下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。

2.图片透明兼容写法  

_filter:alpha(opacity=70);
opacity:0.7;

3.浮动的清除

.clear{
zoom:1;
  }
.clear:after{
  clear:both;
  content:".";
  height:0;
  visibility:hidden;
  display: block;
}

4.超链接访问过后hover样式就不出现的问题

a:link{}
a:visited{}
a:hover{}
a:active{}

5.如何对齐文本与文本输入框

加上 vertical-align:middle; 

   input {  

      vertical-align:middle;  
    }   

6.谷歌字体不能小于12px
利用css3里的属性 ：transform:scale()
-webkit-tansform:scale();
旧有的-webkit-text-size-adjust:none在新版的chrome里已经无效

7.IE6/7/8下auto margin居中bug：

发生场合：给block元素设置margin auto无法居中

解决方法：出现这种bug的原因通常是没有Doctype，然后触发了ie的quirks mode，加上Doctype声明就可以了。在《打败IE的葵花宝典》里给出的方法是给block元素添加一个width能够解决，但根据本人亲测，加with此种方法是无效的，如果没有Doctype即使给元素添加width也无法让block元素居中。

原理分析：缺少Doctype声明。

8.IE8下input[button | submit] 设置margin:auto无法居中
发生场合：ie8下，如果给像button这样的标签（如button input[type="button"] input[type="submit"]）设置{ display: block; margin:0 auto; }如果不设置宽度的话无法居中。
解决方法：可以给为input加上宽度
原理分析：IE8浏览器Bug。

9.IE8百分比padding垂直margin bug：
发生场合：当父元素设置了百分比的padding，子元素有垂直的margin的时候，就好像父元素被设置了margin一样。
解决方法：给父元素加一个overflow:hidden/auto。
原理分析：IE8浏览器Bug。

10.元素float IE6 margin加倍问题
发生场合：当元素置为float时，margin会加倍。
解决方法：加上display:inline；例如：  div{float:left; margin:5px;/*IE6下理解为10px*/ display:inline;/*IE下再理解为5px*/};

11.浏览器默认的外边距、内边距不同

解决方法：*{padding:0;margin:0;}

12.IE6 下min-失效问题
发生场合：IE6下 min-width和min-height不生效

解决方法：IE6把width和height当做最小宽度和高度。利用hack   例如div{min-width:100px;min-height:100px;_height:100px;_width:100px;};

13.IE低版本盒子模型与标准解释不一致
发生场合：IE低版本的盒子模型，content包含了padding和border，导致相差2px。

解决方法：div{margin:30px !important; margin:28px;}  低版本IE不认识!important