0

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

在此处输入图像描述

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

在此处输入图像描述

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

4

3 回答 3

1

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

于 2013-02-18T22:30:11.477 回答
1

其他答案可能是正确的，但您也可能在这里遇到浮动问题。

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

另外，我不知道您.toolbarRight .shortcut班级的宽度和高度是否会保持不变，因为您将其设置为display: inline. 当您需要对事物应用宽度和高度时，请尝试使用 inline-block 或普通的旧块。

于 2013-02-18T22:32:22.140 回答
0

这是你的

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

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

于 2013-02-18T22:31:21.073 回答