Webkit CSS绝对定位错误？

Question

我有一个图像，我正在缩放以充当背景，另一个图像在div中完全定位在它上面，如下：

<div class="item">
    <img class="item_frame" src="...">
    <div class="item_contents">
        <img src="...">
    </div>
</div>

Jsfiddles：

• CSS bug demo
• Jquery demo - dom操作后的相同行为

在webkit broswers中，我看到非常时髦的渲染，其中背景图像偏移并且似乎浮动在它的父容器之外。如果我右键单击以检查元素，浏览器将会适当地重新绘制元素。

• Win64 Firefox 3.6.3有错误
• Win64 Chrome 15.x是错误的
• Win64 IE9 ...实际上是唯一正确显示它的浏览器

这里的标记非常hacky无论如何要适应动态图像加载/调整大小/裁剪，所以我对其他方法有一些想法，我可以尝试。

我错过了什么或者这是一个webkit错误？

Answer 1

不确定这是不是一个错误;但您可以尝试将左侧和顶部值添加到.item_frame css样式以修复它：

.item_frame {
    top: 0;
    left: 0;
}

更新了CSS小提琴：http://jsfiddle.net/h7Tqa/7/

更新了jQuery小提琴：http://jsfiddle.net/h7Tqa/8/

我希望这有帮助！