1

这似乎是一个特定于 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%;
}

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

4

1 回答 1

1

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

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

于 2014-04-24T18:52:00.163 回答