asp.net - Firefox 和 Chrome 之间的 1 像素行高差异

Question

使用母版页在 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;
}

选中的类通过jquery添加到li和a元素中...

这是问题的截图...chrome 示例在顶部，您可以在选项卡下方看到 1px 的红色边框。底部是 firefox 图像，一切正常。

编辑:

在进一步研究之后，我发现实际上是“header”div 本身在 chrome 中增长了 1px……这对我来说似乎很奇怪。

Answer 1

这些答案都不能解决问题。

设置:

line-height: 1;
padding-top: 2px;

因为 webkit 和 mozilla 渲染引擎实现行高的方式不同，所以不要使用它来控制单行元素的测量。

对于菜单、按钮和特别小的通知气泡等元素，将行高重置为正常，并使用填充或边距使它们表现相同。

这是一个说明这个问题的 JSFiddle: http://jsfiddle.net/mahalie/BSMZe/6/