1

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

<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的情况下解决这个问题？

4

2 回答 2

1

尝试

vertical-align: middle;

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

于 2014-01-25T18:58:21.057 回答
0

由于您没有发布任何相关的 CSS，我只能建议您在您的情况下使用 IE hacks 技术来定位 IE8，请尝试以下操作：

.ws-filter div[title="Silver"] {
    margin-top: 20px\0/ /* or margin-bottom: -20px. The value here can changed based on your context */
}
于 2014-01-25T19:04:19.350 回答