Question

所以我必须在没有使用jQuery的情况下在IE8中工作。

HTML

<div id="wrapper">
<area id="clickable-area" alt="" title="" href="#" shape="rect" coords="183,284,224,322" style="outline:none;" target="_self" class="hover" />
<p id="text-hover">Text</p>
</div>

CSS

#wrapper #text-hover {
  position:absolute;
  color: #ecbf96;
  top:30px;
  left:30px;
  visibility:hidden;
}

#wrapper:hover #text-hover { //:hover selects #wrapper in every
  visibility:visible;          //browser other than IE, where it ends
}                            //up selecting #text-hover instead

任何可能导致IE8中此行为的想法以及如何解决这个问题？

Answer 1

#text-hover 元素是绝对定位的。绝对定位的元素从正常流动中移除。文档和其他元素的行为类似于绝对定位的元素不存在。在这种情况下，似乎#wrapper元素的高度为0px，因此它实际上是不可见的。尝试

#wrapper #text-hover{position: relative;}

OR

#wrapper{
    height: 20px; /* or some other value which is bigger than 0 */
}

CSS：hover在IE8中选择了错误的元素

1 个答案: