Css 工具提示未在IE中正确显示

如果将鼠标悬停在上带下划线的表格标题上，将显示工具提示

然而，在IE7中，工具提示显示在其预期位置上方约300px处，而在第一个表中，它们根本不显示

此外，在IE中显示时，工具提示的样式也不是很好，例如，角不圆，阴影不显示。我不太关心样式，但我希望工具提示显示在正确的位置

我正在使用来显示工具提示（我已经稍微修改了这个插件以删除淡入效果）。应用于每个工具提示的CSS样式包括：

.callout {
    max-width: 400px;
    padding: 5px;
    border: 1px solid #7992B0;
    background-color: #FFE8A4;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    box-shadow:         5px 5px 10px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:    5px 5px 10px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}

---

IE<版本9不支持本机或特定于供应商的CSS3规则，如圆角或阴影

对于IE7问题，可以使用条件注释为IE7设置目标CSS

<!--[if IE 7]>
.callout_main 
{
        position: absolute; 
        display: none; 
        margin: 0px; 
        left: 576.5px; 
        top: -66px;

您正在使用Webkit和Mozilla的css属性，这些属性以
-Webkit
和
-moz
开头。这些在IE6、7、8（或任何以前的版本）上都不起作用，因为它们缺少CSS 3支持。总有一天，所有的浏览器都会支持CSS 3，但是现在，如果你想拥有一个漂亮的工具顶，你必须使用一些变通方法（可能），或者强迫你的用户使用一些非IE的东西（取决于你的用户）

存在一个会通知您在各种浏览器上可以使用和不能使用的工具提示。
谢谢您的回答/您能举例说明如何使用CSS将工具提示沿页面向下移动300px吗？

.callout {
    max-width: 400px;
    padding: 5px;
    border: 1px solid #7992B0;
    background-color: #FFE8A4;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    box-shadow:         5px 5px 10px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:    5px 5px 10px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}