1

我有一些简单的 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 中运行良好，但我所有的其他布局似乎都坏了，我从未使用过 doctype，原因是从不需要一个。在此之前，所有三个浏览器的布局都很好。

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

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

4

1 回答 1

5

好吧，您将需要在您的新布局中使用文档类型。快到2012年底了；这些天几乎需要有一个文档类型。一方面，它确保了浏览器之间的一致性：您可能已经看到，其他浏览器的 quirks 模式类似于它们的标准模式......并且与 IE 自己的 quirks 模式有很大不同。

也就是说，如果您出于某种原因必须遵守 quirks 模式，则可以使用 a<a href>代替，并且可以在 IE 中正常工作：<span>:hover

<a href="#" class="tooltip">Thing which can be hovered on</a>
于 2012-12-04T02:46:32.160 回答