span标签的内容被切断

Question

我的名字是垂直显示的。基本上这是我的html页面的结构。

<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标记包含有关该名称的详细信息。 span标记的display属性设置为“none”以启动，并在鼠标悬停在“a”标记内容上时更改为“block”。问题是跨度标记内容在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”上，而不显示“OMAHA NEBRASKA”，它只显示“OMAHA”我可以为IE显示所有文字吗？我尝试使用“溢出”属性，但它没有用。

这是jsfiddle的链接，如果想看一下，它包含所有代码 http://jsfiddle.net/7s4Np/10/

Answer 1

尝试将z-index应用于：hover span

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

我认为工具提示隐藏在流程中的下一个相对元素后面，并且跨越了非透明背景颜色。

Answer 2

问题在于应用于div标签的类.container的css。虽然我的问题在这里没有显示div应用.container类，但它显示了我发布的jsfiddle链接。

这就是问题所在：

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

我删除了“overflow：hidden”属性，它就像一个魅力。

在我之前尝试解决此问题时，我已将“overflow：visible”应用于子元素（span标记）。子元素中的值（溢出：可见）是否应该超过父元素中定义的值（overflow：hidden）？

无论如何，谢谢你们所有人的时间。