程序选择后div内容的大小不一致

Question

我有一个使用鼠标或定时事件选择的tile div。以下是选定和未选择的状态：

没有。选择

。选择已应用

.tile
{
    height: 70px;
    padding: 5px 10px 5px 10px;
    margin: 8px auto 0px auto;
    width: 280px;
    background-color: #99b433 !important;
    cursor: pointer;
}

.tile.selected
{
    border-left: 10px #2d89ef solid;
    width: 270px !important;
}

问题是，当我单击磁贴并使用css：

应用该类时，此方法正常

// tile click handler
$('.tile').click(function () {
    $('#leftPane').children().removeClass('selected');
    $(this).addClass('selected');
});

但是每15秒后从ajax函数调用一次：

$('#' + selectedId).addClass('selected');

我得到（镀铬）：

但是当我将鼠标悬停在它上面时，它会回到上面选择的应用图片上。

.tile:hover
{
    border: 2px solid #2d89ef;
}

关于这种奇怪行为的任何想法？我已经在IE 10和Safari中进行了测试，并且没有在那里进行测试。

编辑（对于埃里克）以下是设置自动后发生的事情，填充整个宽度：

Answer 1

从border-left课程中删除.selected，您也不需要!important：

.tile.selected
{
    width: 270px;
}

http://jsbin.com/izaxuh/10/edit

Answer 2

因为你有width: 270px !important;，所以将宽度设置为auto，它会正常工作。

http://jsbin.com/izaxuh/14