Webkit 浏览器中的 CSS 过渡填充故障

Question

当我在 css 过渡中使用填充时，webkit 浏览器（safari osx、Chrome osx 和 Chrome 窗口）在每个过渡的开始和结束时都会出现小故障，导致放置在动画元素之后的元素移动 1px .

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

HTML

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 transition glitch CSS transition effect makes image blurry / moves image 1px, in Chrome?

（充满可能解决方案的示例：http://jsfiddle.net/QG4QV/18/，但没有任何效果）

Answer 1

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

我发现下面的 CSS 在 Chrome33 中为我修复了它。

test {
    display:inline-block;
}

Demo

编辑：所以看看Chrome DevTools中的元素，没有display:inline-block，“Hover Me”文本本身有一个width=auto和height=auto计算样式。

使用inline-block，文本具有width=60 和height=20 的计算样式。我认为正是这种 hard 计算样式阻止了过渡故障。