鍍金池/ 問答/HTML/ html網(wǎng)頁使用rem計算單位時img位置偏移

html網(wǎng)頁使用rem計算單位時img位置偏移

1.使用px計算單位時代碼如下：
clipboard.png
運行結(jié)果如下：
clipboard.png
（顯示正常）

2.使用rem計算單位（1rem=100px）時代碼如下：
clipboard.png
運行結(jié)果如下：
clipboard.png
（向下偏移）

3.使用rem計算單位（1rem=50px時）代碼如下：
clipboard.png
運行結(jié)果如下：
clipboard.png
（顯示正常）

以上測試在chrome以及opera瀏覽器中進行，測得的div寬高和img寬高均為80px。經(jīng)過測試，當div的rem>1.06時，顯示正常，小于此值時img向下偏移。

求解答該問題出現(xiàn)原因，謝謝了。

回答
編輯回答
澐染

這個跟很多原因有關，無法在瀏覽器看到具體的效果我只能猜測。

猜測1：img 沒加block 屬性。
猜測2：你設了rem 肯定就做了適配。那么根據(jù)瀏覽器的大小，你的html的fontSize可能已經(jīng)變了不再是100了，而是帶小數(shù)，無窮小數(shù)，例如0.33333333....的那種。瀏覽器會搞個四舍五入取成0.3。。那少的哪個0.3就擠下去了，，
猜測3: 因為你設了border 有可能因為div的實際寬度=width+border 圖片=100%=div的實際寬度 = div.width+ border 擠下去的。

還有問題接著問。如果覺得這個回答是認真的請采納和點贊。

2017年1月9日 17:24