在IE8中列出项内联块问题

Question

我有一个水平颜色样本列表，每个列表项都有以下标记：

<li class="ws-filter">
    <a class="ws-swatch-link" title="Black" href="#">
        <div title="Black" class="ws-filter-swatch" style="background-color: #000000;"></div>
    </a>
</li>

但是，选定的色样具有以下标记（无锚标记）：

<li class="ws-filter ws-selected">
    <div title="Silver" class="ws-filter-swatch" style="background-color: #c0c0c0;"></div> 
</li>

这是CSS：

.ws-filter-list .ws-filter {
    display: inline-block;
}

.ws-filter-swatch {
    width: 20px;
    height: 20px;
    border: 1px solid #dcdcdc;
    margin: 2px;
}

这是JSFiddle：http://jsfiddle.net/nHk27/2/

这在大多数浏览器中运行良好，如下所示：

然而，在IE8中，所选的样本弹出了一行，如下所示：

这是我正在研究的项目，我无法更改标记。我尝试过尝试以不同的组合更改div，锚点和列表项的显示。我很确定我可以使用float工作，但有没有办法解决这个问题而不使用float？

Answer 1

尝试

vertical-align: middle;

我有强烈的预感IE8的默认设置将内容放在首位。

Answer 2

由于你没有发布任何相关的CSS，我只能建议你使用IE黑客技术来针对你的情况下的IE8，尝试这样的事情：

.ws-filter div[title="Silver"] {
    margin-top: 20px\0/ /* or margin-bottom: -20px. The value here can changed based on your context */
}