懸停狀態在Google Chrome中移動我的h2

我目前正在測試一個測試頁面來計算一個php函數，並且遇到了一個非常奇怪的錯誤。懸停狀態在Google Chrome中移動我的h2

當您將鼠標懸停在名稱爲鏈接1，鏈接2，鏈接3的導航項上時，標題下方的h2似乎會上下跳動。

懸停狀態是針對一個特定的fontawesome類，並沒有針對h2。

懸停狀態風格：

ul.mainNav > li a:hover .fa-caret-square-o-up { 
    transform: rotate(180deg); 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
}

文本「通過郵政編碼搜索」是h2元素。

這裏是一個小提琴：Demo

我如何去解決這個問題，如果有人知道爲什麼發生這種情況，那麼請讓我知道。：]

來源

2014-01-17 Josh Powell

這對我來說也很好。請嘗試刷新緩存並重新打開Chrome。無法重現問題，抱歉。也許你可以手動設置h2的奇怪的默認margin-top值爲一個整數（當前：margin-top：12.4499998092651px） – ErTR

您的.wrapper班有position:relative。

禁用可解決問題，但可能會破壞其他佈局。

來源

2014-01-17 17:21:09

可悲的是我確實需要'位置：相對;'在包裝上，但這只是一個錯誤？當我在http://healthbenefitsohio.com/zip-code-test/上改變我的佈局時，它似乎也修復了它。 –

您只需要「位置」，因爲您在徽標上使用絕對定位。嘗試使用浮動或內聯塊來重新構造標題的HTML，除非有其他事情正在進行。至於是否有另一種解決方案，我不知道......因爲我不知道究竟是什麼導致了這個問題。 –

除了徽標以外，我還需要其他元素，我在每個主要部分使用包裝。由於我增加了更多的結構，它消除了這個問題，只是我想的一個奇怪的錯誤。 –

不確定您是否更改了原始文章中的演示文稿或Paulie_D答案中的評論，但是當我查看頁面時，我看不到移動的元素。我正在使用谷歌瀏覽器版本32.0.1700.72米。你使用的是當前版本嗎？

來源

2014-01-17 17:31:28 Auzi

我沒有編輯演示，我正在運行的版本是32.0.1700.76版本，稍微比你的版本更新。 –

我剛剛更新了我的Chrome瀏覽器，但仍然沒有看到問題。我甚至試過firefox（v26.0），它的工作正常。我沒有看到文字「通過郵編搜索」移動時，懸停在鏈接1,2,3 .. – Auzi

嗯非常奇怪，因爲它仍然在爲我做。 Firefox不會顯示它發生的事情，我現在在Windows上。 –

懸停狀態在Google Chrome中移動我的h2

回答

相關問題