asp.net – Firefox和Chrome之间的1像素线高差

在asp.net中使用主页面进行新的站点设计。页面的标题是一个35像素高的“菜单栏”，其中包含一个作为无序列表呈现的asp菜单控件。

所选择的菜单项目以不同的彩色背景和左上方和右侧的2px边框设计。所选菜单项的底部应与菜单栏的底部对齐，因此所选的“选项卡”看起来像流入下面的内容。在Firefox和IE中看起来不错，但在chrome中，“标签”似乎比菜单栏的底部高出1个像素。

只是想知道是否有某种错误，我不知道。

我意识到，你很可能需要代码来帮助这个问题，所以不快地发布css。

编辑：

这里是菜单的css …

div.hideSkiplink
{     
    width:40%;
    float:right;
    height:35px;
}

div.menu
{
    padding: 0px 0px 0px 0px;
    display:inline;
}

div.menu ul
{
    list-style: none;
}

div.menu ul li
{
    margin:0px 4px 0px 0px;
}

div.menu ul li a,div.menu ul li a:visited
{
  color: #ffffff;
  display: block;
  margin-top:0px;
  line-height: 17px;
  padding: 1px 20px;
  text-decoration: none;
  white-space: nowrap;
}

div.menu ul li a:hover
{
  color: #ffffff;
  text-decoration: none;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: none;
  border-left: 1px solid #fff;
}




div.menu ul li a:active
{
 background:#ffffff !important;
 border-top:2px solid #a10000;
 border-right:2px solid #a10000;
 border-bottom: none;
 border-left:2px solid #a10000;
 color: #000000 !important;
 font-weight:bold;

}


div.menu ul a.selected
{
  color: #000000 !important;
  font-weight:bold;
}

div.menu ul li.selected
{
 background:#ffffff !important;
 border-top:2px solid #a10000;
 border-right:2px solid #a10000;
 border-bottom: none;
 border-left:2px solid #a10000;
}

div.menu ul li.selected a:hover
{
  border: none;
}

所选的类被添加到li和一个元素通过jquery …

这是一个问题的截图
chrome示例在顶部，u可以在选项卡下方看到1px的红色边框。
底部是一切看起来都很好的firefox图像。

编辑：

在玩了一会儿之后，我发现它实际上是“标题”div本身正在增加1px的铬…这对我来说似乎很奇怪。

解决方法

逐渐增强和优雅退化。和平。

（编辑：安卓应用网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!