绝对定位父级的渲染宽度与gecko中的max-height子级相比

Question

那个头衔满口！所以我有一个绝对定位的父元素，其高度为100％，其子img具有100％max-height。现在，当WebKit（Chromium25）和Opera（12）缩小父级的计算/渲染宽度以匹配img的新（较小）宽度时，Gecko（FF21）将其保留为img s（集体） ）原始宽度和父级似乎有一个很大的右边填充。

请参阅此处：http://jsfiddle.net/b3TY5/（大屏幕所有者：请调整浏览器窗口大小，以便灰色图像开始缩小）

现在我已经读过position: absolute被过度使用了（我找到了问题的解决方法），但我仍然会对

感兴趣

• 使Gecko表现得像WebKit的解决方案（IMO WebKit的方式更合乎逻辑。或者我错了吗？）
• 对不同行为的解释，也许是关于未来遇到这种情况的最佳实践（但请比“不要使用绝对位置”更具建设性;）

谢谢！

编辑：我的解决方法并不完美，因为我最终得到了100％宽度的父元素，所以我不能拥有right: 0的绝对定位的孩子。当我将父设置为display: inline-block时，WebKit显示与Gecko相同的行为。参看http://jsfiddle.net/b3TY5/1/并确保有一个非常小的结果窗口。注意第一个div的右边填充。

EDIT2：

1. 我担心原始问题的解决方案可能只是：它很奇怪。正如@Diodeus指出的那样，position: absolute与height: 100%存在问题。对我来说，这从来没有出现过问题：浏览器缩放图像到视口的（最大 - ）高度（即使未指定）但他们的呃，占位符至少是水平，没有正确缩放，据我所知。当父容器变小时，此错误边距会增加。虽然WebKit缩小了父级以整齐地包装其子级，但它只在页面加载时才这样做，而不是在调整大小后...
2. 在我的解决方法中 - 没有position: absolute / height: 100% - 我发现Gecko / WebKit不一致：http://jsfiddle.net/b3TY5/3/;使用box-sizing: border-box（resp。-moz-box-sizing）WebKit缩小父级以匹配子级的宽度（蓝色div小于黄色的宽度），而Gecko则不会（蓝色和黄色div等于宽度）。