2019獨角獸企業重金招聘Python工程師標準>>>
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; }
應該加入樣式重置中.
?