css - 标签控件顶部边框未调整

Question

我在 tabel 单元格中有一个标签控件，悬停时使用 css 我设置了顶部边框或红色。​​问题是顶部边框的位置显示边框之间的距离，就像我附有问题的图片中一样

如果你看到，那么红色边框不像一个方形 Angular ，并且在它的顶部也显示一个空白的顶部空间。我已经多次尝试删除它但我失败了。请任何人帮助我使边框 Angular 相等并且黑色空间也应该喜欢第二张图片。简而言之，我想制作像这张图片一样的边框

我的CSS代码如下

#sddmCA div
{   position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #444444;
    border: 1px solid #959595;
    border-top-color:#464646;
    margin-top:1cm; 

标签控制代码在这里

<ul id="sddmCA">
<asp:Label ID="CA"   runat="server" Font-Names="Arial" Font-Size="10pt" ForeColor="#CCCCCC" Style="margin-top:auto;" Height="100%" Text="Current Activities"         onmouseover="var b = ChangeColorCA();  hideshow(this);   this.style.cursor='pointer'; boldCA();    return b"                                     onmouseout="var b = mclosetime();   return b;" onclick="var a = mopen('m11'); this.style.background='#464646'; this.style.color='#FFFFFF'; this.style.borderBottomColor ='#464646'; this.style.borderRightColor ='#464646'; this.style.borderLeftColor ='#464646';  return a"  ></asp:Label>&nbsp;&nbsp;

Answer 1

您可以在非悬停状态上设置与悬停状态宽度相同的黑色边框，或者使用框阴影(取决于您选择支持的浏览器)

#sddmCA div /*removed non-question related code*/
{   
    border: 1px solid #959595;
    border-top-color:#000000;
}

#sddmCA div:hover
{   
    border: 1px solid #959595;
    border-top-color:#464646;
}

这将使它保持在同一个位置，因为悬停时边框不会改变其大小。