为什么在主流浏览器中1px填充图像呈现不同？

Question

我的内部有一个图像。

跨度具有1 px的边框和填充，以在跨度和图像之间产生小的间隙，但1px填充在所有浏览器中呈现不同，我没有得到解决此问题的最佳方法。

跨度有一个显示：内联块，因为它旁边必须有另一个元素，但我注意到如果我将显示更改为块可能看起来更好。

<td class="tdCartCol4">
   <span>
       <img src="/medias/sys_master/loropiana/photosOfColors/hash000/8814966046750.jpg">
   </span>
   <p> W538 </p>
   <br>
   <i>blue navy </i> 
</td>

CSS

span {width: 17px;
height: 17px;
padding: 1px;
margin-top: 4px;
display: inline-block;
border-radius: 50%;
border: 1px solid #b76e4d;}

img {
width: 17px;
height: 17px;
border-radius: 50%;

p {
font-size: 15px;
display: inline-block;
margin-left: 5px;
}
}

铬

Firefox，即使在具有两个相同设置的同一文件中，它们看起来也不同

Answer 1

而不是两次做同样的事情（边界半径，跨度和图像上的高度和宽度）为什么不去做呢？

从span中删除所有样式并使用：

img {
width: 17px;
height: 17px;
border-radius: 50%;
padding: 1px;
border: 1px solid #b76e4d;}

这将在不同的浏览器中呈现（据我测试）正确。

我建议给img一个类并在该类上做样式  否则所有图像都将是圆的。