在带有十进制宽度值的像素上丢失底部边框（仅限firefox）

Question

我在图像div容器中有一个图像。我垂直和水平对齐它。但是，当我这样做使用变换 - 我失去了我的一个图像的底部边框，我不太清楚为什么。

HTML：

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

的CSS：

.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，这使得底部边框消失。 （即使是overflow: visible）

无论如何强制自动值不以十进制值着陆？或类似的东西。

小提琴示例：http://jsfiddle.net/dLLan/24/（问题只发生在firefox中，所以请确保在firefox中运行小提琴。）

Answer 1

既然您更新了问题，我就是这样做的：
1.添加了一个新div（#imgholder）来保存myImg div 2.在20px上添加了25px和#imgholder的自定义宽度和高度。
3.将#myImage的宽度和身高更改为height: auto;＆amp; width: 100%; #imgholder使其适合#imageContainer { float: left; position: relative; background-color: lightblue; } #imgholder { width: 20px; height: 25px; } #myImage { height: auto; width: 100%; border: 1px solid black; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }。

＆＃13;

＆＃13;

<div id="imageContainer">
  <div id="imgholder">
    <img id="myImage" src="http://s7.postimg.org/k8e5116ff/806c278b5a0f77b98f4dcc469f2d0b08.jpg" />
  </div>
</div>

＆＃13;

@ManyToMany(cascade=CascadeType.ALL)
@JoinColumn(name = "book_category_id")
public BookCategory getBookCategory() { return bookCategory; }

＆＃13;

＆＃13;

＆＃13;