CSS过渡填充在webkit浏览器中出现故障

Question

当我在CSS转换中使用填充时，Webkit浏览器（Safari OSX，Chrome OSX和Chrome Windows）在每次转换的开始和结束时会出现小故障，导致动画元素后面的元素向上或向下移动1px。

HTML：http://jsfiddle.net/QG4QV/19/

test test test <span class="test">Hover me</span> test test test test

CSS

.test{
  color:#FFF;
  background:#000;
  padding:4px 4px 4px 30px;
  transition: padding 0.5s linear;
}

.test:hover{
  padding:4px 30px 4px 4px;
}

我已经搜索并尝试了各种解决方案，但没有一个解决这个问题的例子?! CSS过渡故障 在Chrome中使图像模糊/移动图像1像素的CSS过渡效果? （示例包含可能的解决方案：http://jsfiddle.net/QG4QV/18/，但没有一项有效）

- user63457

Answer 1

我不知道这个故障是否有其他解释。我猜测，填充值的动画在过渡期间会导致四舍五入不一致性，从而影响 .test 元素的总宽度。

我发现以下CSS代码可以在Chrome33中解决此问题。

test {
    display:inline-block;
}

演示

编辑: 因此，在Chrome开发者工具中查看元素时，如果没有display:inline-block，则"Hover Me"文本本身具有width=auto和height=auto的计算样式。

使用inline-block后，文本的计算样式为width=60和height=20。 我认为正是这种硬编码的样式防止了过渡时出现故障。

- andyb

---

遗憾的是，在Safari浏览器中问题仍然存在。 - user63457

啊，抱歉我这里没有Safari来测试。稍后我会尝试另一台机器。 - andyb