Jam*_*ray 1 html css doctype internet-explorer tooltip
我有一些简单的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.
希望我已经充分解释了我的问题,谢谢.
好吧,你需要在新的布局中使用doctype.它已接近2012年底; 这些天几乎需要有一个doctype.首先,它确保浏览器之间的一致性:正如您可能已经看到的,其他浏览器的怪癖模式与其标准模式类似......并且与IE自身的怪癖模式大不相同.
也就是说,你可以使用一个<a href>代替a,<span>如果你必须坚持任何原因的怪癖模式,并将:hover在IE中正常工作:
<a href="#" class="tooltip">Thing which can be hovered on</a>