Javascript DIV元素游标的行为不一致

我在JSP页面上有一个DIV元素，其行为在以下CSS类中定义：

.toolbarRight .shortcut {
background-position: left center;
background-repeat: no-repeat;
width:16px;
height:16px;
margin:0 8px 0 0;
display:inline;
cursor:pointer;
position:relative;
top:6px;
float:left;
border:none;
}

span.toolbarRight .export {
background-image: url('/images/excel.gif');
}

所以基本上当你用鼠标悬停在它上面时，它应该变成一个指针。问题是它只会变为指向元素底部1/4的指针，而不是指向顶部3/4的指针。请看下面的图片以了解问题的说明

图1：鼠标光标位于Excel图标底部1/4上方（变为指针）：

图2：鼠标光标位于Excel图标上方3/4处（不会变为指针）：

另一件奇怪的事情是，它只发生在我当前的屏幕配置中，其中包括两个DHTMLX网格，一个在屏幕的上半部分，另一个在底部（请看下图；出现问题的Excel图标用黄色圆圈表示）：

如果我有三个网格（两个水平网格和一个垂直网格），则不会出现问题：

---

有人知道这是什么原因吗？

通常当我遇到这个问题时，是因为你有另一个项目的填充重叠在工具栏上（或其他东西）。因为底部的1/4是可见的，所以上面的部分可能会稍微重叠。这是你的

位置：相对位置； 顶部：6px

---

combo-元素的位置比您想象的位置低6像素。图像可能更高，但容器不是。将指针移到图像，而不是图像的容器

其他答案可能是正确的，但这里也可能存在浮点问题

通过应用

overflow:hidden。试试看。如果失败，请使用

另外，我不知道你的
.toolbarRight.shortcut
类的宽度和高度是否会保持不变，因为你将它设置为
display:inline
。当需要将宽度和高度应用于对象时，请尝试使用内联块或普通旧块。
如果是这样，则如果我将鼠标光标悬停在图像下方，鼠标光标将变为指针，但事实并非如此。我尝试了溢出：隐藏和显示：内联块和显示：块。但这些都不管用。我还不熟悉clearfix。此外，我注意到导致问题的左边的图像工作正常，即使它们使用相同的CSS类，.toolbarright.shortcut.Hmm，在这些情况下，我通常使用Chrome（右键单击，选择inspect element）或Firebug检查有问题的元素。“元素”选项卡允许您将鼠标悬停在标记中的项目上，并显示每个元素在幕后的宽度和高度轮廓。也许有什么东西覆盖了你的div，就像@Joe建议的那样。使用Chrome Inspector查看是否有任何相邻的DIV干扰。在元素选项卡上悬停，你会看到一个轮廓。是的，就是这样。它右边的另一个DIV比它看起来要宽，并且它与正在讨论的DIV重叠。我调整了另一个DIV的宽度，解决了这个问题。谢谢。是的，这正是问题所在。谢谢