跨瀏覽器CSS問題

Question

此頁面上的工具提示（facebook，twitter等圖標）在任何Firefox或IE中均可正確顯示，但在Chrome中根本不顯示。

CSS看起來像這樣：

<style>

.tooltip-fb {display: none; position: absolute; color: #fff; background: url('<?php bloginfo('template_directory'); ?>/img/bg.png'); padding: 5px; margin-left: -55px; margin-top: 40px;}

.tooltip-tw {display: none; position: absolute; color: #fff; background: url('<?php bloginfo('template_directory'); ?>/img/bg.png'); padding: 5px; margin-left: -5px; margin-top: 40px;}

.tooltip-tr {display: none; position: absolute; color: #fff; background: url('<?php bloginfo('template_directory'); ?>/img/bg.png'); padding: 5px; margin-left: 50px; margin-top: 40px;}

.tooltip-qr {display: none; position: absolute; color: #fff; background: url('<?php bloginfo('template_directory'); ?>/img/bg.png'); padding: 10px; margin-left: 49px; margin-top: 40px;} 

.tooltip-nw {display: none; position: absolute; color: #fff; background: url('<?php bloginfo('template_directory'); ?>/img/bg.png'); padding: 5px; margin-left: 166px; margin-top: 40px;}

a {position: relative;}

a:hover .tooltip-fb, a:hover .tooltip-tw, a:hover .tooltip-tr {display: block; text-align: center;}

a:hover .tooltip-nw {display: block; text-align: center;}

a:hover .tooltip-qr {display: block;}

</style>

標記是這樣的：

<div style="margin-top: -170px; margin-left: 28px;">

<!-- FACEBOOK -->

<a href="https://www.facebook.com/pages/NH-Olomouc-Congress/102448499808962?ref=ts&fref=ts" target="_blank"><div class="ikony"><img src="<?php bloginfo('template_directory'); ?>/img/fb.jpg" onmouseover='$(".tooltip-fb").show();' onmouseout='$(".tooltip-fb").hide();' alt="facebook"></div><div class="tooltip-fb">Sledujte nás na Facebooku!</div></a>


<!-- TWITTER -->
<a href="https://twitter.com/nholomouc" target="_blank"><div class="ikony"><img src="<?php bloginfo('template_directory'); ?>/img/twit.jpg" alt="twitter" style=""></div><div class="tooltip-tw">Sledujte nás na Twitteru!</div></a>


<!-- TRIPADVISOR -->
<a href="http://www.tripadvisor.com/UserReviewEdit-g274718-d1783064-a_placetype.10023-e__2F__Hotel__5F__Review__2D__g274718__2D__d1783064__2D__Reviews__2D__NH__5F__Olomouc__5F__Congress__5F__Hotel__2D__Olomouc__5F__Olomouc__5F__Region__5F__Moravia__2E__html-NH_Olomouc_Congress_Hotel-Olomouc_Olomouc_Region_Moravia.html" target="_blank"><div class="ikony"><img src="<?php bloginfo('template_directory'); ?>/img/trip.jpg" alt="tripadvisor" style=""></div><div class="tooltip-tr">Ohodnoťte náš hotel!</div></a>


<!-- QR CODE -->
<a href="#"><div class="ikony"><img src="<?php bloginfo('template_directory'); ?>/img/qr.jpg" alt="qr code" style=""></div><div class="tooltip-qr"><center style="padding-bottom: 2px;">QR kód této stránky</center><img alt="QR kód této stránky" width="180" height="180" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=250x250&amp;chl=<?php echo $pageURL;?>&amp;choe=UTF-8&amp;chld=L|1" /></div></a>


<!-- NEWSLETTER -->
<a href="http://www.algrafmedia.cz/wp/?page_id=2669" target="_blank"><div class="ikony"><img src="<?php bloginfo('template_directory'); ?>/img/news.jpg" alt="newsletter" style=""></div><div class="tooltip-nw">Odebírejte náš newsletter!</div></a>


</div>

只是一個純CSS解決方案，用於在懸停時顯示文本塊。 嘗試過JavaScript解決方案（onmouseover，onmouseout），在任何瀏覽器中均不起作用。

您將如何解決？

Answer 1

我不知道它為什么會這樣顯示的確切原因，但沒有添加margin-top: -170px只是將iframe的height降低了170（ margin-top: -170px = 190 ）並從div中刪除了margin

<iframe src="..." width="278" height="190" scrolling="no" frameborder="0" z-index="99"></iframe>
...
<div style="margin-left: 28px;">