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

Question

1.使用px计算单位时代码如下：

运行结果如下：

（显示正常）

2.使用rem计算单位（1rem=100px）时代码如下：

运行结果如下：

（向下偏移）

3.使用rem计算单位（1rem=50px时）代码如下：

运行结果如下：

（显示正常）

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

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

Answer 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 挤下去的。

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