span標籤的內容被砍掉

我有垂直顯示的名稱。基本上這是我的HTML頁面的結構。span標籤的內容被砍掉

<div>         <div/> 
    <a>name<span>Details</span></a>   <a>name<span>Details</span></a>  
    <a>name<span>Details</span></a>   <a>name<span>Details</span></a> 
</div>         </div>

因此，每個「a」標籤包含一個名稱並且span標籤包含有關該名稱的詳細信息。當鼠標懸停在「a」標籤內容上時，span標籤的顯示屬性設置爲「none」以啓動並更改爲「block」。問題是span標記內容在IE8中被切斷。在Firefox和Chrome中運行良好。

我的CSS文件：

#tooltip1 { position: relative; } 
#tooltip1 a{text-decoration: none; color:#000000;} 
#tooltip1 a span { display: none; color: #FFFFFF; }  
#tooltip1 a:hover span { display: block; position: absolute; 
         background-color: #aaa; color: #FFFFFF; 
         padding: 5px; height: 10px; 
         width:500px; }

我有我的鼠標「OMA」在這張照片，和而不是顯示「奧馬哈」，那隻能說明「奧馬哈」我能做些什麼，爲IE顯示所有的文字？我已經嘗試使用「溢出」屬性，但它不起作用。

Picture of what it looks like in my system

這是的jsfiddle擁有所有的代碼，如果想看看 http://jsfiddle.net/7s4Np/10/

來源

2012-11-01 Susie

檢查這個分支與更簡單的HTML結構，看看我的意思：http://jsfiddle.net/dBqeC/ - 在我的IE9模式下工作正常。 –

它運行在jsfiddle但不是當我運行我的應用程序。在jsfiddle中，即使沒有z-index屬性，它也可以工作。 – Susie

如果它僅在您的應用程序中失敗，那麼我們需要查看**您的應用程序**來解決問題。 – KatieK

問題在於應用於div標籤的類.container的CSS。雖然我的問題在這裏沒有顯示div應用.container類，但它顯示了我發佈的jsfiddle鏈接。

這就是問題的撒謊：

.container {width: 100px; float: left; overflow: hidden; padding: 10px;}

我刪除了「溢出：隱藏」屬性和它的工作就像一個魅力。

在我以前的嘗試解決這個問題，我已經應用「溢出：可見」的子元素（span標籤）。子元素中的值（溢出：可見）不應該超過父元素中定義的值（溢出：隱藏）嗎？

無論如何，謝謝你們所有的人爲你的時間。

來源

2012-11-02 16:49:28 Susie

嘗試應用的z-index到的鏈接：懸停跨度

#tooltip1 a:hover span{ z-index:5; }

我認爲工具提示被隱藏在流中下一個相關元素的後面，並跨越其中的不透明背景色。

來源

2012-11-01 16:53:39

謝謝你的答案，但它仍然無法正常工作。 – Susie

span標籤的內容被砍掉

回答

相關問題