0

我正在使用 position:absolute 来构建一些自定义按钮，这些按钮在 IE(9) 中可以正常工作，但在 Chrome(19) 或 Firefox (12) 中却不能使用以下简单的代码：

<div  id="FileDetailsDisptBoxToolTip" title="^ToolTip" 
style="position: fixed; left: 15px; top: 310px;  width:60px; height: 20px;">
    <img src="newButtonImages/infoTrack.png"  width=60 height=20
         onmouseover="dispFileDetails()" onmouseout="hideFileDetails()"/>
</div>

在 IE 中，鼠标事件触发并且标题显示为工具提示。在 Chrome 和 FF 中，没有鼠标事件和工具提示。我已经尝试了很多排列 - 只有当我删除 position: fixed; 它是否有效，但随后我失去了基本定位。我会很高兴有一个解决方法。

4

2 回答 2

0

破解它！
似乎 Chrome、FF 和 Safari 对元素在 html 中的位置顺序很挑剔。
如果它们不按顺序排列，如我的演示中所示：

<div title="ToolTip" style="position: fixed; left: 15px; top: 310px; width:60px; height: 20px;"> <img src="newButtonImages/infoTrack.png" width=60 height=20 onmouseover="dispFileDetails()" onmouseout="hideFileDetails()">
</div> <div style="position: absolute; top:158px; left:10px; width: 160px; height: 180px;">
<span id="infoDisplay" ></span> </div> <div style="position: fixed; top:375px; left:8px; width: 165px; height: 240px; background-image: url(newButtonImages/mapImage.png); background-repeat: no-repeat" title="map_canvas tip"/> ..... </div>
我用 top: 310px 声明第一个 div，然后在 top:158px 和最后一个在 165px，除了 IE 之外，它都失败了。如果我按 158px、165px 和 310px 的顺序声明它们，问题就会消失。请参阅http://www.gpsanimator.com/demo/x.html - 它适用于各种浏览器！
现在这个烦人的小功能怎么样？

于 2012-05-05T08:01:46.623 回答
0

根据我之前的评论，问题出在 IE 上。如果没有正确的文档类型，您将处于怪癖模式，您将永远无法让 IE 尝试像其他更现代的浏览器那样执行。将此添加到您的第一行，然后看看我们的立场<!DOCTYPE html>

在您添加之前，无法判断 IE 与此相关的其他问题。

于 2012-05-05T13:46:38.947 回答