行の先頭から始まります絶対的に配置されたスパン（hover-tooltip-container）は、他のブラウザと同様に、行の上部ではなく下部で始まります。 hover-tooltip-containerにボーダーを追加すると、これを見ることができます。IE7絶対位置が、私は問題を例示フィドルを作成
これは、ツールチップを上に移動してもアンカーが引き続き表示されるため、問題です。ツールチップ上にマウスを置くことができるはずですが、IE7のギャップはこれを不可能にします。
hover-tooltip-containerスパンをIE7、IE8、およびFFXの行の同じ場所で開始する方法があれば、それは完璧です。
Javascriptは解決策ではありません。
私はフロート左 "コンテナ" 要素を持つことによって、問題を解決することができましたし、相対的な位置を持つ。これにより、コンテナが壊れるような外観が得られますが、ツールチップを上に上げるためのリファレンスが提供されます。
あなたが既に持っているコードで行うことができる最も簡単なことは、.hover-tooltip内のbottomルールを調整するための星のハックをIE7用に追加することです。
.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のダブル、ネストされた絶対位置が不要に思えます。
+1良い診断と、最良の解決策（状況下で）。 – davin
@Bart私は星のハックを避けたいですが、私たちは見るでしょう。ダブルネストされた位置は最初は必要ではないようですが、問題を引き起こす可能性がありますが、アンカーが他のテキストでインラインで表示される可能性があるため、実際には必要ですが、ツールチップはまだ伸びていなければなりませんページの左側にあり、アンカーに対して相対的に上になります。これには、どこから上がったかの参照を得るために別の「目に見えない」要素がラップされている必要があります。 –
私は全く違ったことをしました（あなたのクラスを名前変更して、それらのlooooooooooongの名前で遊ぶのは面倒です）。
Iは、ネストされた絶対positionningを除去：彼らが問題を引き起こす一つであり、絶対位置の要素は、コンテキストから取り出されるからです。したがって、2つのソロ、ネストされた絶対配置要素は、1つの要素がでないことを意味します。（不思議で本当に必要ではありません）。
代わりに、あなたのツールチップボックスを絶対に配置しましたが、負の位置（top:-70px）を使用してアンカーよりも高い位置に開始させました。それは少しスケッチですが、あなたは私のポイントを得る必要があります。
.hover-ツールチップ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%; }
サイド発行：100％の幅では、パディングや境界線が考慮されません。例：Safariでは、ウィンドウをどのように幅広く作成しても、ツールチップは常にウィンドウより広い（水平スクロールバーを使用）。 – Sparky
@ Sparky672ありがとうございます。 100％幅のコンテナは、比較的幅の狭い別のコンテナの内側にある必要がありますので、これは問題ではありません。 –