html链接位置移动,在谷歌浏览器HTML列导致链接移动悬停

这似乎是一个铬特定问题，它在Firefox中工作正常。我正在使用HTML列来模拟只有HTML和CSS的砌体布局。在谷歌浏览器HTML列导致链接移动悬停

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

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

我在Adobe的CQ5中工作，并且创建了自定义列表类型。每个列表项目都包含以下内容，任何带有$ {}的内容都是来自CMS的变量。

${firstName} ${lastName}

${position}

Email:${email}

Phone: ${phone}

Office: ${office}

的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浏览器的发展，所以我才意识到，这是只有当我正准备在这里发表此铬。

+0

我使用的是Chrome浏览器，并且检出了您提供的链接，我没有看到任何移动。看起来很好！ –

+0

@SamThompson昨晚我刚找到解决方案，我忘了在这里添加解决方案。我会让这个标题更宽泛，现在在这里标记我的解决方案。感谢您检查它。 –