In Google Chrome HTML columns cause links to move on hover

Question

This seems to be a chrome specific issue, it works fine in firefox. I'm using HTML columns to emulate a masonry layout with just HTML and CSS.

The left column displays images just fine, but in the right column, when you hover over the images, they move to the right a very small amount, as if they had a hover state setting a left border for them. I've done "inspect element" and tried to figure out what's going on, but I'm at a loss.

I'll explain what's going on in more detail below, but you can view the live site here.

I'm working within Adobe's CQ5, and I've created a custom list type. Each list item contains the contents below, and anything with ${} is a variable from the CMS.

<a href="${href}"><img src="${thumbnail}"></a>
<div class="profile">
<p>
<a href="${href}"><strong>${firstName} ${lastName}</strong></a><br>
${position}<br>
Email:<a href="mailto:${email}">${email}</a><br>
Phone: ${phone}<br>
Office: ${office}<br>
</p>
</div>

The CSS looks like this:

.position{
    padding-left:0.5em;
}
.list p{
    line-height:1.2em;
    margin: 0;
    padding: 0;
}
.list div{
    margin:0.5em 0 0 0.5em;
    display:inline-block;
    vertical-align:top;
}
.list img{
    width:160px;
    height:auto;
    display:inline-block;
}
.custom li{
    display:inline-block;
    background:#F2F7F7;
    width:100%;
    margin-bottom: 1em;
    border:1px solid #ccc;
    line-height:0;
}
.custom{
    -moz-column-count: 2;
    -moz-column-gap: 1em;
    -webkit-column-count: 2;
    -webkit-column-gap: 1em;
    column-count: 2;
    column-gap: 1em;
    width: 100%;
}
@media all and (max-width:1300px){
    .custom{
    -moz-column-count: 1;
    -moz-column-gap: 0;
    -webkit-column-count: 1;
    -webkit-column-gap: 0;
    column-count: 1;
    column-gap: 0;
    width: 100%;
}

I've been using chrome for development, so I just realized that it was chrome only when I was preparing to post this here.

Answer 1

I finally figured out what was going on here. I saw some other threads which addressed column-count issues in chrome, and they spoke to this indirectly.

To solve the problem, I had to add position:relative; to the links and their parents. In my particular code above, this included <a> tags, <img> tags, the position class, and the custom class.