IE對百分比寬度的理解。。。貌似很囧

2021-08-30 09:22:21 字數 611 閱讀 5510

布局的時候貌似發現ie對百分比的寬度計算有點問題,google之。果然。。。

寫道ie與firefox對百分比寬度解析存在細小差異,假設乙個div寬度800px。裡面有8個字div等寬依次浮動,可以這麼寫。

以下為引用的內容:

.out

.out .in

html**:

以下為引用的內容:

照我們的理解:12.5% * 8正好為100%嘛!所以內部8個div的寬度一起浮動總寬度應該正好等於外部div的寬度的。

ok,想法畢竟是想法,而事實上:火狐下是這樣子,但是ie,不好意思,不是這樣的。

這裡我沒有計算,資料或許有不准,但是原理是實踐過滴。

ie算百分比的時候完全取整的。

777px*12.5%=97.125

ie會取整,於是為97px,8個累加就是776px,結果總長少了1px。

同樣的,如果外部div寬度為772,則

772 * 12.5%=96.5px,取97px,結果776px,總長長了4px。

這是我在寫自適應頁面時遇到的乙個比較頭疼的問題。問題原因是知道了,如何解決還沒有想到很好的方法。

firefox下表現很好。ie,嘆息!

理解 height 百分比

相對于父元素的高度根據百分比計算高度。如果父元素沒有設定高度或者父元素高度百分比不生效,則無法計算自己的高度。當沒有給父元素設定高度或父元素高度百分比不生效時,父元素高度由子元素高度決定。html 的父元素可以理解成 window,瀏覽器會將 html 填充完整個瀏覽器視窗 當 html 高度設定為...

IE與火狐對百分比寬度解析的細小差異

ie與firefox對百分比寬度解析存在細小差異,假設乙個div寬度800px。裡面有8個字div等寬依次浮動,可以這麼寫。以下為引用的內容 out out in html 以下為引用的內容 照我們的理解 12.5 8正好為100 嘛 所以內部8個div的寬度一起浮動總寬度應該正好等於外部div的寬...

寬度百分比單位的轉換公式

目標寬度 上下文寬度 結果 比例寬度 當前元素的畫素寬度 當前元素的父元素的畫素寬度 當前元素的百分比寬度 例如 原css wrapper header aside section wrapper header aside section 百分比寬度css wrapper 指定外圍寬度,數值隨意 h...