html - Google Chrome の HTML 列でホバー時にリンクが移動する

Question

これは Chrome 固有の問題のようで、Firefox では問題なく動作します。HTML 列を使用して、HTML と CSS だけで石積みのレイアウトをエミュレートしています。

左の列には画像が正常に表示されますが、右の列では、画像にカーソルを合わせると、ホバー状態で左の境界線が設定されているかのように、画像が非常にわずかに右に移動します。「要素の検査」を行って、何が起こっているのかを理解しようとしましたが、途方に暮れています。

以下で詳しく説明しますが、ライブサイトはこちらからご覧いただけます。

私は Adob​​e の CQ5 内で作業しており、カスタム リスト タイプを作成しました。各リスト項目には以下の内容が含まれており、${} が付いているものはすべて 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>

CSS は次のようになります。

.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%;
}

私は開発にクロムを使用していたので、ここに投稿する準備をしているときに初めてクロムであることに気付きました。