哈弗取決於字體大小在Chrome

我試圖與一個懸停效果的菜單。如果你懸停鏈接，它的背景顏色應該改變。如果你去下一個鏈接，它應該順利地改變到下一個鏈接。

問題

當你將鼠標懸停在一個鏈接，然後去下一個，還有就是元素之間小的差距。如果你的鼠標在那個確切點上，沒有任何反應。

工作實施例

.menu-item { 
 
    list-style: none; 
 
    float: left; 
 
    text-transform: uppercase; 
 
    font-size: 21px; 
 
    line-height: 30px; 
 
} 
 

 
a { 
 
    padding: 20px; 
 
} 
 

 
a:hover { 
 
    background-color: green; 
 
}

<div id="menu"> 
 
    <ul class="menu-list"> 
 
    <li class="menu-item"><a href='#'>Menü #1</a></li> 
 
    <li class="menu-item"><a href='#'>Menü #2</a></li> 
 
    <li class="menu-item"><a href='#'>Menü #3</a></li> 
 
    </ul> 
 
</div>

不工作實施例

.menu-item { 
 
    list-style: none; 
 
    float: left; 
 
    text-transform: uppercase; 
 
    font-size: 20px; 
 
    line-height: 30px; 
 
} 
 

 
a { 
 
    padding: 20px; 
 
} 
 

 
a:hover { 
 
    background-color: green; 
 
}

<div id="menu"> 
 
    <ul class="menu-list"> 
 
    <li class="menu-item"><a href='#'>Menü #1</a></li> 
 
    <li class="menu-item"><a href='#'>Menü #2</a></li> 
 
    <li class="menu-item"><a href='#'>Menü #3</a></li> 
 
    </ul> 
 
</div>

我的觀察

如果更改font-size只是一個像素，它的工作原理。如果我使用IE工作在這兩個例子，但在Chrome只工作之一工作：d

什麼我要求...

這是Chrome錯誤或有有可能使「不工作」的工作。

來源

2017-04-10 Janick Fischer

這是一個非常有趣的片段解決這個問題 - 我在我的答案解釋的問題，但總之，這是因爲內置的顯示性能基本上'''標籤的加入在鉻瀏覽器中的一些默認樣式。發現得好。和一個寫得很好的問題+1。 – Frits

我給予好評，以一個非常好的問題 –

這裏都工作正常，在Chrome 57和在MacOS歌劇院44。這些示例是否發生變化，或者這是舊版Chrome版本的問題？ – OptimusCrime

它實際上是一個有趣的問題較小。該「問題」是由瀏覽器CSS即讀的a標籤的display:inline;，並沒有它填補了li標籤的整個display:block;引起的。

您可以使用下面的CSS規則

.menu-item a { 
    display:block; 
}

來源

2017-04-10 14:44:26 Frits

非常感謝你，它現在完美。 –

這不是一個錯誤，是預期的和期望的結果。內聯元素如此工作。不要說這是一個錯誤，因爲不是。 –

Hi @MarcosPérezGude - 感謝您的反饋:)我沒有提及它是一個錯誤 - 不確定混淆來自哪裏，因爲我同意這不是一個錯誤？因此，我對默認造型的解釋... – Frits

-4

從菜單項中刪除字體大小和行高，直接的風格的鏈接。這種行爲很可能來自舍入錯誤。

來源

2017-04-10 14:39:55 cloned

添加display: block的鏈接。鏈接比李

來源

2017-04-10 14:42:22 Cyril

哈弗取決於字體大小在Chrome

回答

相關問題