万恶的浏览器兼容问题

一 Input 框

1.谷歌火狐通过border:none; 可以去掉边框，ie6则不行，必须加一句 background:none;

如果需要背景颜色可以重新写一个input{ background:red;}

2.谷歌火狐input内部文字自动垂直居中(不需要设置line-hight)，而ie不是。兼容IE需要加上一下 input { hight:30px;linehight:30px\9;} （其中\9是指所有ie浏览器）。

二. ie6的双边距bug。

块状使用了左侧浮动，浮动之后用margin-left（比如10px），则此时盒子距离左侧实际距离为20px。且如果俩盒子同事左浮，只有最左边的有双边距现象。

解决方法：在css属性加上 display：inline-block；（将display设置为inline后，就改变了BUG产生的条件之一，即必须是块状元素。但是后来又看到了下面这段话：“熟悉规则的人知道浮动元素自动设置为”block”元素，而不管他们之前是什么。这说明浮动元素上的{display: inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。”）

三．Overflow ：hidden

1，在ie7下，button

中文字越多则button两侧的padding越大，此时给button加上Overflow ：hidden可以使不同文字但button的padding值一样大。

2.ie6 不支持overflow：hidden 清除浮动。

四．滚动条滚动高度

1. 怪异模式的浏览器（未声明DTD ）   

我们应该使用  document.body.scrollTop          scrollLeft

2. 标准模式的浏览器

    我们应该使用的是  document.documentElement.scrollTop; 

3. ie9+ 以上的版本以及正常浏览器  （除了ie678等）

我们跟提倡 使用  window.pageYOffset;         pageXOffset 

三种方法 都是 被卷去的头部写法。

我们兼容写法： 

var scrolltop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

五．定位

1.IE6不支持固定定位。

六. 提示浏览器版本过低

[if lt IE 10]
  您的浏览器版本过低，请升级。
[endif]