Firefox和Chrome之间的像素线高度差异为1

Question

使用母版页在asp.net中进行新的网站设计.页面的标题是一个35像素高的"菜单栏",其中包含一个呈现为无序列表的asp菜单控件.

所选菜单项的样式为不同颜色的背景,左上角和右侧各有2px边框.所选菜单项的底部应与菜单栏的底部对齐,以便所选的"选项卡"看起来好像流入下面的内容.在firefox和IE中看起来很好,但在chrome中,"tab"似乎比菜单栏的底部高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和元素中...

以下是问题的屏幕截图... Chrome示例位于顶部,您可以在标签下方看到1px的红色边框.在底部是firefox图像,其中一切看起来都很好.

编辑:

在玩了这个之后,我发现它实际上是"标题"div本身在chrome中增长了1px ......这对我来说似乎很奇怪.

Answer 1

这些答案都没有解决问题.

组:

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

因为webkit和mozilla渲染引擎以不同的方式实现行高,所以不要使用它来操纵单行项目的测量.

对于菜单,按钮等特别是非常小的通知气泡等项目,请将行高重置为正常,并使用填充或边距使其行为相同.

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

Answer 2

我只是遇到了同样的问题,我通过在<li>包含<a>作为标签链接的元素的元素中明确设置行高和字体大小来解决它.希望这可以帮助将来的某个人.

(编辑的html链接)

Answer 3

重要的是要认识到网页在不同浏览器中的呈现方式总是不同的。实现像素完美是徒劳的，现在我试图向我的客户解释要付出什么样的成本才能使每个浏览器呈现完全相同的网站。现在，他们更多地了解到 IE6 和 FF4 不会以相同的方式呈现任何页面。我们必须努力让我们的客户理解并拥抱网络的动态。

渐进增强和优雅降级。和平。