pc样式在ie8中的bug

 

1,box-sizing:border-box:

    在ie中,此属性的使用有限制:

    (在IE8中，min-width属性适用于content-box即使box-sizing设置为border-box。    

    Chrome select在使用时从元素中选择选项时遇到问题box-sizing: border-box，并且浏览器缩放级别低于100％。

    IE 8忽略box-sizing: border-box是否使用min / max-width / height。当设置为position：absolute / fixed，overflow：auto / overflow-y：scroll时，IE9将减少滚动条的宽度为元素的宽度

    Safari 6.0.x不对带有display：table的元素使用框大小;Android浏览器无法正确计算HTML选择元素的尺寸（宽度和高度）。)

因此,在设置元素的宽高时,让内容居中,用padding值实现并不是最好.最好用定高度,line-height属性设置居中.以防止在ie中元素尺寸变大.

因此在pc中,应该不使用border-box属性.

 

注:width:50px; 在ie中,相当于 min-width:50px;

 

2.即使float过的元素,在ie8中依然会有原始的宽度,而不再同一行;因此应显示定义宽度,

 

3,针对ie 的属性不兼容,可以采用覆盖操作,利用'*','_','!important'等进行属性值的覆盖.

 

4,

低版本的IE只对本身inline的元素能用inline-block，而本身为block的元素需要设为inline。此外，如果想要让这个buggy的inline-block生效，还需要让元素具备hasLayout，常见的方法是设置zoom。如果想绕过低版本IE又保持对其他浏览器的兼容，可以这样：

.xx { display: inline-block; *display: inline; // IE7- only hack zoom: 1; }

应该加入样式重置中.