List item inline-block issue in IE8

Question

I have a horizontal list of color swatches, and each list item has the following markup:

<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>

However, a selected color swatch has the following markup (no anchor tag):

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

Here's the CSS:

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

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

And here's the JSFiddle: http://jsfiddle.net/nHk27/2/

This works just fine in most browsers, and looks like the following:

However, in IE8, the selected swatch pops out of line, like this:

This is a project I'm working on, and I can't change the markup. I've tried experimenting with changing the display of the div, anchor and list item in different combinations. I'm pretty sure I could get it to work using float, but is there any way to fix this without using float?

Answer 1

Try

vertical-align: middle;

I have a strong hunch IE8's default puts the content up on top.

Answer 2

Since you're not posting any relevant CSS, I can only suggest you to use IE hacks technique to target IE8 in your case, try something like this:

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