DIV元素游标行为不一致

Question

我在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图标带圆圈黄色）：

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

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

Answer 1

通常当我遇到这个问题时，这是因为你有另一个项目的填充与工具栏（或其他东西）重叠。由于底部1/4是可见的，因此几率之上的几率略高于此值。

Answer 2

其他答案可能是对的，但你可能也有浮动问题。

您可以通过应用overflow: hidden;强制父容器包装其浮动的子容器。试试吧。如果失败，请使用clearfix。

另外，我不知道你的.toolbarRight .shortcut课程的宽度和高度是否会因为你设置为display: inline而增加。当您需要对物体应用宽度和高度时，请尝试使用内联块或仅使用普通旧块。

Answer 3

这是你的

位置：相对; 顶部：6像素;

组合 - 元素比您想象的要低6个像素。图像可能会更高，但容器不是。将指针移动到图像，而不是图像的容器