firefox中的奇怪问题，我有4个图像彼此相邻浮动，宽度为容器的25％。这些图像都是彼此相邻的，但是一旦我使用包含文本的图像，那么当我调整浏览器大小以改变容器的宽度时，图像不会总是齐平，它们似乎会缩小一个px。
HTML
<img src="image.jpg" />
<img src="image.jpg" />
<img src="image.jpg" />
<img src="image.jpg" />
CSS
img {
width: 25%;
float: left;
}
img标签似乎占据了正确的空间，它只是实际的图像。因为我已经在img中应用了一个背景，当调整大小时可以看到它。
请参阅以下jsfiddle以演示此问题。顶部是一行没有文字的图像，你可以看到它们很好。第二行是相同大小的图像，但有文字，当你调整大小时，你会看到蓝色来自应用于img的背景。
请注意，这只发生在firefox中，所有其他浏览器似乎都没问题。
我想这与firefox基于25％计算宽度的方式有关，但有没有解决方法。