Question

我的代码适用于FF，Chrome但在IE中没有。问题是底部链接显示在工具提示内的多行上。

这是我的所有代码（没有额外的CSS）css：

CSS文件

.hint,[data-hint] {
    position: relative;
    display: inline-block;}
.hint:before,.hint:after,[data-hint]:before,[data-hint]:after {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    z-index: 100000;
    pointer-events: none;}
.hint:hover:before,.hint:hover:after,.hint:focus:before,.hint:focus:after,[data-hint]:hover:before,[data-hint]:hover:after,[data-hint]:focus:before,[data-hint]:focus:after {
    visibility: visible;
    opacity: 1;}
.hint:before,[data-hint]:before {
    content: '';
    position: absolute;
    background: transparent;
    border: 6px solid transparent;
    z-index: 100001;}
.hint:after, [data-hint]:after {
    content: attr(data-hint);
    background: #FFFFFF !important;
    color: #fff;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 12px;
    width: 200px;
    white-space: pre-wrap;
    line-height:1.3em;
    text-align:center;
}
.hint--bottom:before {
  margin-top: -12px; }
.hint--bottom:after {
  margin-left: -18px; }
.hint--bottom:before, .hint--bottom:after {
  top:  100%;
  left: 15px;}
.hint--info:after {
color:#5B5957!important;
border:1px solid #335088;
-webkit-box-shadow: 0px 10px 20px 0px rgba(97,97,97,0.7);
-moz-box-shadow: 0px 10px 20px 0px rgba(97,97,97,0.7);
box-shadow: 0px 10px 20px 0px rgba(97,97,97,0.7);   
  }
.hint--info.hint--top:before {
  border-top-color: #335088; }
.hint--info.hint--bottom:before {
  border-bottom-color: #335088; }
.hint--info.hint--left:before {
  border-left-color: #335088; }
.hint--info.hint--right:before {
  border-right-color: #335088; }

，我的HTML是：

<ul> 
<li>Features</li>
<li><a href="#" class="hint--bottom  hint--info" data-hint="test test  test test  test test  test test test test">Updates</a></li>
<li>Features</li>
<li><a href="#" class="hint--bottom  hint--info"  data-hint="awdawd">Examples</a></li>
<li><a href="#" class="hint--bottom  hint--info" data-hint="awdawd">Products</a></li>
</ul>

将市场视为红色图像 https://cloud.githubusercontent.com/assets/9686181/5025627/7e889594-6b23-11e4-9c95-89016aa0b29f.png

Answer 1

好的，您遇到的问题是IE8上的z-index存在已知问题（2009年推出）。

错误报告为here

首先，我会建议您升级浏览器，因为IE 8的浏览器市场份额较低statistics for IE8。

解决方法

根据我发现的信息，如果您简单地将z-index值从10000更改为＆gt; 10001.在10001之间 - > 10002将解决您的问题。

谢天谢地我没有IE 8，我的Browserstack帐户正在播放，所以很遗憾我无法验证修复。但这应该给你足够的信息

需要帮助来解决IE 8 z-index工具提示

1 个答案: