在 Google Chrome HTML 列中，导致链接在悬停时移动答案

【问题标题】：In Google Chrome HTML columns cause links to move on hover在 Google Chrome HTML 列中，导致链接在悬停时移动
【发布时间】：2014-06-07 13:55:27
【问题描述】：

这似乎是特定于 chrome 的问题，它在 Firefox 中运行良好。我正在使用 HTML 列来模拟仅使用 HTML 和 CSS 的砌体布局。

左列显示图像很好，但在右列中，当您将鼠标悬停在图像上时，它们会向右移动非常小的量，就好像它们具有悬停状态为它们设置了左边框一样。我已经完成了“检查元素”并试图弄清楚发生了什么，但我不知所措。

我将在下面更详细地解释发生了什么，但您可以查看实时站点here。

我在 Adobe 的 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%;
}

我一直在使用 chrome 进行开发，所以我只是在准备在这里发布此内容时才意识到它是 chrome。

【问题讨论】：

我正在使用 Chrome，我查看了您提供的链接，我没有看到任何动作。看起来不错！
@SamThompson 我昨晚才找到解决方案，忘记在此处添加解决方案。我会让标题更宽泛一些，现在在这里标记我的解决方案。感谢您检查它。

标签： html image google-chrome aem column-count

【解决方案1】：

我终于弄清楚这里发生了什么。我看到一些其他线程解决了 chrome 中的列数问题，他们间接谈到了这一点。

为了解决这个问题，我不得不添加 position:relative;到链接和他们的父母。在我上面的特定代码中，这包括<a> 标签、<img> 标签、位置类和自定义类。

【讨论】：