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

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(2009 年推出)上的 z-index 存在已知问题。

错误报告是here

所以首先我建议您升级您的浏览器，因为这个 IE 8 的浏览器市场份额很低 statistics for IE8 .

解决方法

根据我找到的信息，如果您简单地将 z-index 值从 10000 -> 10001 更改。到 10001 -> 10002 之间，这将解决您的问题。

谢天谢地，我没有 IE 8，而且我的 Browserstack 帐户正在运行，所以不幸的是我无法验证修复。但这应该给你足够的信息