Question

我有一些简单的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放在顶部时，例如：

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

它在Internet Explorer中工作正常，但我所有其他布局似乎都破了，我从来没有使用过doctype，原因是从不需要。在此之前，所有三种浏览器的布局都很好。

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

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

Answer 1

嗯，您需要在新布局中使用doctype。它已接近2012年底;这些天几乎需要有一个doctype。首先，它确保浏览器之间的一致性：正如您可能已经看到的，其他浏览器的怪癖模式与其标准模式类似......并且与IE自身的怪癖模式大不相同。

也就是说，如果您因任何原因必须坚持怪癖模式，那么可以使用<a href>代替<span>，:hover将有效在IE中就好了：

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

IE问题：悬停时的HTML工具提示需要doctype

1 个答案: