2012-03-06 100 views
3

看來我在Chrome中有一個奇怪的問題,「寬度:0px」。 我將寬度設置爲0,以部分隱藏鏈接。在鼠標懸停時,我用簡單的動畫顯示鏈接。 雖然Firefox和Opera的表現很不錯,但在Chrome中我看到顯示的鏈接文字,即使寬度設置爲。 (在IE和Safari我現在不能測試)鉻 - 問題與「寬度:0px」

爲方便起見,我加入了代碼的小提琴,在這裏:http://jsfiddle.net/mihaidoru/yNzSH/

問:我怎樣才能讓Chrome顯示同樣的事情,火狐,只有CSS , 如果可能的話。

注意:菜單應該尊重CSS:「position:fixed; right:0px」。

任何幫助將不勝感激。

謝謝。

+1

隱藏元素而不是將寬度設置爲0px會不會更「乾淨」?使用display:none; – DaveHogan 2012-03-06 14:19:30

+0

@DaveHogan - 然後幻燈片動畫將無法正常工作。 – Quentin 2012-03-06 14:20:38

+0

我還在每個鏈接的右側填充了一個圖標。爲了簡單起見,我也沒有添加圖像。 – mihaidoru 2012-03-06 14:24:41

回答

1

我已經設置了寬度爲1px,而不是0像素。它使得綠色背景出現,當你將鼠標懸停在它上面時,它會像預期的那樣展開。我也在你的jQuery中將它改爲1px。

updated fiddle

+0

謝謝。這更接近預期效果。然而,我不明白爲什麼將寬度設置爲1像素,並將其設置爲0像素不起作用。 – mihaidoru 2012-03-06 14:55:22

3

將鏈接設置爲overflow: hidden

+0

感謝您的快速回答。感謝幫助,但是,我設置了:「position:fixed; right:0;」,#menu右側有一個空格,僅在Chrome中顯示。 – mihaidoru 2012-03-06 14:22:18

1

您可以使用CSS overflow屬性

overflow: hidden; 
0

overflow: hidden不爲我工作,嘗試display:none; JavaScript讀取OK。