2011-04-12 7 views
0

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; 
} 
+0

フォントサイズと上限値を変更すると、それがFFに一致するように見えました。あなたは最高の値を変更しても問題は解決しないのですか? – Sam

+0

ここで何か他のことが起こっているはずです...トップ:0は、親コンテナの上部にあるボックスの上端を配置し、そのすぐ下には表示されません。私は使ってみることを考えなかった!重要だが、それがうまくいくかどうかは分からない...そして、私はそれを良い考えだとは思わない。トップとフォントサイズの値を変更すると、すべてのブラウザで変更されます。私がIE上でそれを上げれば、他のブラウザでどのように見えるのかがわかりません。 私が働いているサイトがreset.cssを使用しているとは思わない...もしそうなら、問題を修正するだけかもしれない。 – JaidynReiman

答えて

1

[OK]を、これはIE8がSUPタグをレンダリングする方法が原因で、私は信じています。ベースラインは、それを上回るのではなく、テキストの残りと同じであるとみなします。あなたはちょうどCSSでこれをやりたければ、あなた自身の上付き文字クラスを使うことを考えています。

Here's a fiddle私にとってはうまくいきました。

代わりの解決策として、IE7で正しくレンダリングされているようです.IE8をIE7互換モードに強制することができます。あなたの<head>の上にこの行をドロップしてください。私はこれがIE9に何をするのか分からないが、それは価値がある。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
+0

うーん...私はsupタグを削除しようとしましたが、何もしていないようです。おそらく、私はそこにそれを乱していた何かがあった。 .questionsでは、相対的な位置ではいけません。私は両方を試してみる。 – JaidynReiman

+0

さて、これでもうすぐ近いです。これにより、IEでフォントサイズが小さくなる問題が修正されました。ポップアップがもう少し近いと思われます。しかし、何か他のものがあるはずなので、もう少し詳しく調べてみましょう。私はあなたがjsFiddleで言ったことと全く同じものをエミュレートしていないかもしれません。注意して、私はsupを削除し、新しい値を.questionsに追加しました。私は絶対的なものではなく相対的なものにしました。 – JaidynReiman

関連する問題