2019獨角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

pc樣式在ie8中的bug

?

1,box-sizing:border-box:

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

????(在IE8中，min-width屬性適用于content-box即使box-sizing設(shè)置為border-box。????

????Chrome?select在使用時從元素中選擇選項時遇到問題box-sizing: border-box，并且瀏覽器縮放級別低于100％。

????IE 8忽略box-sizing: border-box是否使用min / max-width / height。當(dāng)設(shè)置為position：absolute / fixed，overflow：auto / overflow-y：scroll時，IE9將減少滾動條的寬度為元素的寬度

????Safari 6.0.x不對帶有display：table的元素使用框大小;Android瀏覽器無法正確計算HTML選擇元素的尺寸（寬度和高度）。)

因此,在設(shè)置元素的寬高時,讓內(nèi)容居中,用padding值實現(xiàn)并不是最好.最好用定高度,line-height屬性設(shè)置居中.以防止在ie中元素尺寸變大.

因此在pc中,應(yīng)該不使用border-box屬性.

?

注:width:50px; 在ie中,相當(dāng)于 min-width:50px;

?

2.即使float過的元素,在ie8中依然會有原始的寬度,而不再同一行;因此應(yīng)顯示定義寬度,

?

3,針對ie 的屬性不兼容,可以采用覆蓋操作,利用'*','_','!important'等進(jìn)行屬性值的覆蓋.

?

4,

低版本的IE只對本身inline的元素能用inline-block，而本身為block的元素需要設(shè)為inline。此外，如果想要讓這個buggy的inline-block生效，還需要讓元素具備hasLayout，常見的方法是設(shè)置zoom。如果想繞過低版本IE又保持對其他瀏覽器的兼容，可以這樣：

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

應(yīng)該加入樣式重置中.

?

轉(zhuǎn)載于:https://my.oschina.net/u/3272730/blog/1580016

總結(jié)

以上是生活随笔為你收集整理的pc样式在ie8中的bug的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。