Question

this page（脸谱，推特等图标）上的工具提示可以在任何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（ 360 - 170 = 190 ）并从div中删除margin

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

跨浏览器的CSS问题

1 个答案: