IE 问题:悬停时的 HTML 工具提示需要文档类型

我有一些简单的CSS/HTML用于非常基本的工具提示：

    <style type="text/css">
    .tooltip {
        text-decoration: none;
        position: relative;
    }
    .tooltip span {
        margin-left: -999em;
        position: absolute;
    }
    .tooltip:hover span {
        border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
        position: absolute; left: 1em; top: 2em; z-index: 99;
        margin-left: 0; width: 250px;
    }
    .custom { padding: 0.4em 0.4em 0.4em 0.8em; }
    .info { background: #D5F1FF; border: 3px solid #2BB0D7; }
    </style>
<span class="tooltip">Thing which can be hovered on</a>
<span class="custom info">
Text in tooltip goes here...
</span></span>

显然，这对Firefox和Chrome都很好用，但是当我尝试使用Internet Explorer时，工具提示无法加载/工作...

但是，当我将文档类型放在顶部时，例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

它在Internet Explorer中运行良好，但是我的所有其他布局似乎都坏了，我从未使用过文档类型，因为从来不需要文档类型。在此之前，所有三种浏览器的布局都很好。

CSS 中

是否有可以更改的内容，以便工具提示可以在 Internet Explorer（没有文档类型）或类似的工具提示 CSS 方法中工作？ -Pref not javascript。

希望我已经充分解释了我的问题，谢谢。

好吧，您将需要在新的布局中使用文档类型。2012年已接近尾声;如今，几乎需要文档类型。首先，它确保了浏览器之间的一致性：正如您可能已经看到的，其他浏览器的怪癖模式类似于它们的标准模式......并且与IE自己的怪癖模式大不相同。

也就是说，如果您出于任何原因必须坚持 quirks 模式，您可以使用<a href>代替<span>，:hover可以在 IE 中正常工作：

<a href="#" class="tooltip">Thing which can be hovered on</a>

相关内容

最新更新

热门标签：