Question

我创造了一个例证问题的小提琴：

这完全符合我的要求，但问题是在IE7中，绝对定位的跨度（hover-tooltip-container）从行的顶部开始，而不是像在其他浏览器中那样从底部开始。如果您向hover-tooltip-container添加边框，则可以看到此内容。

这是一个问题，因为我希望工具提示上升，但锚仍然暴露。你也应该能够将鼠标悬停在工具提示上，但是IE7中的差距使得这一点变得不可能。

如果有任何方法可以让hover-tooltip-container范围在IE7，IE8和FFX中的同一位置开始，那将是完美的。

Javascript不是解决方案。

Answer 1

使用您已有的代码，您可以做的最简单的事情就是为IE7添加明星黑客以调整bottom中的.hover-tooltip规则。

.hover-tooltip {
   display: block;
   padding: 15px;
   position: absolute;
   margin: 0 auto;
   bottom: 1em;
   *bottom: 0;
   width: 100%;
   border: 2px outset #c0c0c0;
   background-color: #f0f0f0;
   text-align: center;
}

但是，.hover-tooltip-container和.hover-tooltip的双重嵌套绝对位置似乎是不必要的。

Answer 2

我做了一些完全不同的事情（也改名为你的课程，很容易玩这些looooooooooong名字的麻烦）。

http://jsfiddle.net/vZtBb/16/

我删除了嵌套的绝对位置：它们是导致问题的那个，因为绝对位置的元素被取消了上下文。所以，2个独立的，嵌套的绝对定位元素意味着一个元素在 nothing 中（毛刺而真的不想要）。

而不是那样，我将工具提示框放在绝对位置，但是通过使用负位置（top:-70px）使其开始高于锚点。这有点粗略，但你应该明白我的观点。

Answer 3

尝试将此项放在.hover-tooltip div之后：

<div class="clear fix"></div>

和这个css：

.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}

.clearfix {display: inline-block; }

html[xmlns] .clearfix {display: block; }* html .clearfix {height: 1%; }

Answer 4

我能够通过让“容器”元素向左浮动并具有相对位置来解决问题。这实现了突破容器的外观，但仍然为工具提示提供了参考。

与其他浏览器相比，IE7绝对位置从顶部开始

4 个答案: