工具提示在IE中无法正确显示

Question

如果您将鼠标悬停在this page上带下划线的表格标题上，则会出现工具提示

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

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

我正在使用YACOP JQuery plugin来显示工具提示（我稍微修改了这个插件以消除褪色效果）。应用于每个工具提示的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);
}

Answer 1

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

至于IE7问题，使用条件评论为IE7设置目标CSS

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

}     

或CSS browser selector并使用CSS重新定位标注div。 第一个表的工具提示似乎没有出现，因为它位于页面顶部的上方，因此在浏览器“渲染视图”之上。

<强>更新

在回答您的问题时，我会：<div class="callout_main" style="...">我会将这些内联样式移动到CSS文件中，并且IE /规则会将top: 366px;更改为top: -66px;。我认为这有助于解决您的问题：）

Answer 2

.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);
}

您正在使用Webkit和Mozilla的css属性，即以-webkit和-moz开头的属性。这些不适用于IE 6,7,8（或任何前一个），因为它们缺乏CSS 3支持。有一天，所有浏览器都希望支持CSS 3，但是现在，你必须使用一些解决方法（可能），或强迫你的用户使用不是IE的东西（取决于你的用户），如果你想拥有一个漂亮的tooltop。

有一个compatibilty master table会告诉您在各种浏览器上可以使用和不能使用的内容。