啊。我真的非常讨厌跨浏览器的兼容性...我正在一个Wordpress网站上为客户创建一个弹出框，该弹出框恰好在我悬停的项目下方（使用自定义简码）。我将顶部设置为16px，它在Firefox中可以正常工作。但是，在IE8中，它看起来要低得多。即使我将top设置为“ 0”，它仍会出现在所包含博客的下方，而不是顶部。
我也有一个相关的问题，即IE8中的字体大小大约小了2个像素。在此之前也有一个<sup></sup>标记，但是将其删除不会有太大变化-IE8中的字体大小仍然较小。
这是页面：
http://www.medicalmarcom.com/services/
将鼠标悬停在左侧的每个问号都有一个弹出窗口（有点像工具提示）。我需要使其能够在FF，IE，Safari和Chrome中运行。唯一无法使用的是IE。值得庆幸的是，他没有提到IE6，因此除非他将其选中，否则我不必担心。
这是HTML：
<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：
.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;
}
最佳答案
好的，我相信这是由于ie8如何呈现sup标签。它认为其基线与文本的其余部分相同，而不是其上方。如果您只想使用CSS进行此操作，则可以考虑使用自己的上标类。
Here's a fiddle似乎对我有用的东西。
作为一种替代解决方案，它似乎可以在IE7中正确呈现，您可以强制IE8进入IE7兼容模式。将此行放在<head>的顶部。我不知道这会对IE9产生什么影响，但是值得一试。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
关于html - 嵌套在相对块中的绝对块在IE8中显得较低，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5629310/