IE6碰到的兼容问题小结

1.双边矩bug 解决办法： display:inline 或这个浮动元素之前再设一个浮动元素

2.IE  div height:100% 解决办法  html,body{ margin:0; height:100%; }  （IE6下html默认就是100%高度，body则不是）

3.IE6(Q) IE7(Q) IE8(Q) 中给 IMG 元素设置 'padding' 无效

4.line-height 不同浏览器下表现不一样，用偶数  尽量用数字不带单位

5.firefox按钮文字垂直居中 input::-moz-focus-inner{ border: none;padding: 0;}/*针对Firefox*/

6.清除浮动

.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }

.clearfix { *zoom:1; }.

　　

7.inline-block 兼容

.dib-wrap {
font-size:0;/* 所有浏览器 */
*word-spacing:-1px;/* IE6、7 */
}
.dib-wrap .dib{
font-size: 12px;
letter-spacing: normal;
word-spacing: normal;
vertical-align:middle;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
/* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
.dib-wrap{
letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
}
}
.dib {
display: inline-block;
*display:inline;
*zoom:1;
}

　　8.firefox点击后虚线框

a {
outline: none; /* 去掉Firefox点击时产生的虚线框 */
}

9.IE6之“重影”bug～  有几种方法 但我试了有些无效，不知道为啥，最后一般用float里面的div小于外面div3公分

10.IE6  line-height失效   对和文字相连接的img、input、textarea、select、object等元素加以属性
margin: (所属line-height-自身img,input,select,object高度)/2px 0;vertical-align:middle