Html 丢失具有十进制宽度值的像素的下边框（仅限firefox）

我在图像div容器中有一个图像。我垂直和水平对齐它。但是，当我使用transform进行转换时，我丢失了一幅图像的底部边框，并且不太清楚原因

html:

<div class="imageContainer">
    <img class="myImage" src='x'> 
</div>

.imageContainer {
   width: 20px;
   max-height: 25px;
   height: 25px;
   position: relative;
   background-color: lightblue;
   }

.myImage { 
   width: auto;
   height: auto; /* Set to 9.2px in fiddle example to force the problem. */
   max-height: 25px;
   max-width: 20px;
   border: 1px solid black;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);     
   }

更新： 原因是自动调整大小的图像位于十进制值上。（fx 9.2px），四舍五入。据我所知，它将我的9.2高度元素包装在一个边框中，然后将其向下舍入到9px，这使得底部边框消失。（即使溢出：可见）

是否强制自动值不在十进制值上着陆？或者类似的东西

---

fiddle示例：（问题只发生在firefox中，因此请确保在firefox中运行fiddle。）

由于您更新了问题，以下是我所做的：
1.添加了一个新的div（

#imgholder

）来保存

myImg

div.
2.在

#imgholder

上添加了自定义的宽度和高度

20px

和

25px

3.将

#myImage

的宽度和高度更改为

高度：自动&
宽度：100%
使其适合
#imgholder


#图像容器{
浮动：左；
位置：相对位置；
背景颜色：浅蓝色；
}
#伊姆戈尔德{
宽度：20px；
高度：25px；
}
#我的形象{
高度：自动；
宽度：100%；
边框：1px纯黑；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

你能给我们演示一下吗？我看不到任何代码会让你丢失底部边框。另外，这个问题是在所有浏览器中都会出现，还是只在某个浏览器（和版本）中才会出现？是否缺少一些转换？因为这种方式不会发生任何事情，你需要完成什么？只在firefox中发生（在最新的稳定版本中进行测试）。我刚刚找到了底部边框消失的原因，因为我的图像的宽度和高度设置为自动，大小自动设置为9.2，四舍五入为9。-它在我的9.2高度元素周围放置了一个边框，然后将其向下舍入到9，这会使底部边框消失：/嗯，你每天都会学到一些新的东西，有时在你发布问题之前，只需多次查看你的代码（：仍不清楚如何处理它。值为0.4px以下的图像会松开其底部边框。-元素向上取整没有问题。您能否提供这些div中的所有父元素和完整代码，以便我们进一步了解问题？请查看我刚才添加的小提琴示例。感谢您的努力。