html网页使用rem计算单位时img位置偏移

pudding__
  • 3
新手上路,请多包涵

1.使用px计算单位时代码如下:
clipboard.png
运行结果如下:
clipboard.png
(显示正常)

2.使用rem计算单位(1rem=100px)时代码如下:
clipboard.png
运行结果如下:
clipboard.png
(向下偏移)

3.使用rem计算单位(1rem=50px时)代码如下:
clipboard.png
运行结果如下:
clipboard.png
(显示正常)

以上测试在chrome以及opera浏览器中进行,测得的div宽高和img宽高均为80px。经过测试,当div的rem>1.06时,显示正常,小于此值时img向下偏移。

求解答该问题出现原因,谢谢了。

回复
阅读 2.4k
1 个回答
✓ 已被采纳

这个跟很多原因有关,无法在浏览器看到具体的效果我只能猜测。

猜测1:img 没加block 属性。
猜测2:你设了rem 肯定就做了适配。那么根据浏览器的大小,你的html的fontSize可能已经变了不再是100了,而是带小数,无穷小数,例如0.33333333....的那种。浏览器会搞个四舍五入取成0.3。。那少的哪个0.3就挤下去了,,
猜测3: 因为你设了border 有可能因为div的实际宽度=width+border 图片=100%=div的实际宽度 = div.width+ border 挤下去的。

还有问题接着问。如果觉得这个回答是认真的请采纳和点赞。

宣传栏