css换分辨率移位代码,CSS3转换旋转导致Chrome中移动1像素

我在chrome中遇到了css3转换旋转过渡的问题。 过渡效果很好，但是在完成过渡后，元素移位了一个像素。 另一个奇怪的是，它仅在页面居中时才会发生(margin:0 auto;)。 如果同时删除过渡，该错误仍然存在。

您可以在这里看到它的发生：

[http://jsfiddle.net/MfUMd/1/]

HTML：

CSS：

.wrap {

margin:50px auto;

width: 100px;

}

.block {

width:30px;

height:30px;

background:black;

}

.target,.block {

display:block;

-webkit-transition: all 0.4s ease;

-moz-transition: all 0.4s ease;

-o-transition: all 0.4s ease;

transition: all 0.4s ease;

}

.target:hover,.block:hover {

-webkit-transform: rotate(90deg);

-moz-transform: rotate(90deg);

-o-transform: rotate(90deg);

-ms-transform: rotate(90deg);

}

注释掉margin:0 auto;行以使其消失。

任何人都有任何想法如何在保持页面居中的同时停止此操作？

我在OSX 10.6.8上使用版本24.0.1312.57

干杯