在谷歌瀏覽器HTML列導致鏈接移動懸停

這似乎是一個鉻特定問題，它在Firefox中工作正常。我正在使用HTML列來模擬只有HTML和CSS的砌體佈局。在谷歌瀏覽器HTML列導致鏈接移動懸停

左側欄顯示圖像很好，但在右側欄中，當您將鼠標懸停在圖像上時，它們會向右移動很少量，就好像它們有懸停狀態，爲它們設置了左側邊框。我已經完成了「檢查元素」並試圖弄清楚發生了什麼，但是我不知所措。

我會在下面更詳細地解釋發生了什麼，但您可以查看實況網站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瀏覽器的發展，所以我才意識到，這是隻有當我正準備在這裏發表此鉻。

來源

2014-04-22 Tortilaman

我使用的是Chrome瀏覽器，並且檢出了您提供的鏈接，我沒有看到任何移動。看起來很好！ –

@SamThompson昨晚我剛找到解決方案，我忘了在這裏添加解決方案。我會讓這個標題更寬泛，現在在這裏標記我的解決方案。感謝您檢查它。 – Tortilaman

我終於明白了這裏發生了什麼。我看到一些其他的線程用chrome來解決列數問題，他們間接地談到了這個問題。

爲了解決這個問題，我不得不添加position：relative;鏈接和他們的父母。在我上面的特定代碼中，這包括<a>標籤，<img>標籤，位置類和自定義類。

來源

2014-04-24 18:52:00 Tortilaman

在谷歌瀏覽器HTML列導致鏈接移動懸停

回答

相關問題