pc樣式在ie8中的bug

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; }

應該加入樣式重置中.