Ugh。私は本当に、クロスブラウザの互換性が本当に嫌い...私はカスタムショートコードを使用してホバリングしているアイテムのすぐ下に表示されるポップアップボックスを作成するクライアントのためのWordpressのサイトで働いています。私はトップを16pxに設定していて、Firefoxではうまく動作します。しかし、IE8では、それはかなり下に表示されます。私がトップを "0"に設定したとしても、それはトップの代わりに、ブログの下に表示されます。相対ブロックにネストされた絶対ブロックがIE8の下に表示されます
IE8でのフォントサイズが約2ピクセル小さいという点で、関連する問題もあります。この前に<sup></sup>
というタグがありますが、それを削除してもそれほど変化はありません。IE8ではまだフォントサイズが小さくなっています。
http://www.medicalmarcom.com/services/
左側に沿ってすべての疑問符が(ちょっとツールチップのような)それの上にマウスを移動したときに表示されるポップアップを持っています。ここ
ページです。 FF、IE、Safari、Chromeで動作させる必要があります。それがうまく動作しないのはIEのみです。ありがたいことに、彼はIE6について言及していないので、私はそれを選んでいない限り、私はそれについて心配していません。<span class="questions"><sup>(
<div class="popup_content"><span class="popup">?</span>
<div class="popup_inside" style="display: none;">We’ll ask questions to understand your business, objectives, competitive situation, and positioning statement.<br />
<a href="http://www.medicalmarcom.com/services/medical-device-marketing-discovery/"><span style="color:#15398c"><em>Read More >>></em></span></a></div>
</div>
)</sup></span>
はCSS:ここ
がHTMLである
.popup_content {
display: inline;
position: relative;
}
.popup_inside {
background-color: #FFF;
border: 1px solid #000;
text-align: left;
font-size: 12px;
color: #000;
width: 300px;
padding: 2px;
line-height: 1.5;
left: 0;
top: 16px;
z-index: 1001;
position: absolute;
display: none;
}
.popup {
position: relative;
z-index: 1000;
}
フォントサイズと上限値を変更すると、それがFFに一致するように見えました。あなたは最高の値を変更しても問題は解決しないのですか? – Sam
ここで何か他のことが起こっているはずです...トップ:0は、親コンテナの上部にあるボックスの上端を配置し、そのすぐ下には表示されません。私は使ってみることを考えなかった!重要だが、それがうまくいくかどうかは分からない...そして、私はそれを良い考えだとは思わない。トップとフォントサイズの値を変更すると、すべてのブラウザで変更されます。私がIE上でそれを上げれば、他のブラウザでどのように見えるのかがわかりません。 私が働いているサイトがreset.cssを使用しているとは思わない...もしそうなら、問題を修正するだけかもしれない。 – JaidynReiman