Chromes奇怪的行为位置绝对和-webkit-transform：旋转

Question

我在一个例子中解释：

http://jsfiddle.net/KW4CX/1/

如果您点击The Divs In Order：B - ＆gt; C - ＆gt; D - ＆gt; E ....（或其他方式）它工作正常。但如果你跳过一个：A - ＆gt; D它没有更新Div的X值。

有人知道解决方法吗？也可能是Javascript。

代码： HTML

<div class="col a"><span>A</span></div>
<div class="col"><span>B</span></div>
<div class="col"><span>C</span></div>
<div class="col"><span>D</span></div>
<div class="col"><span>E</span></div>
<div class="col"><span>F</span></div>
<div class="col"><span>G</span></div>
<div class="col"><span>H</span></div>

的js

$(document).ready(function(){
    $('.col').click(function(){
        $('.col.a').removeClass('a');
        $(this).addClass('a');
    });
});

的CSS

.col{
    width: 50px;
    height: 20px;
    float: left;
    border: 1px solid #ccc;    
}

.col span{
    position: absolute;
    top: 1%;
    -webkit-transform: rotate(-90deg);
}

.col.a{width: 150px}

重要的是“.col span”重现此问题需要所有值。