Firefox 和 Chrome 之间 1 像素的行高差答案

【问题标题】：1 pixel line height difference between Firefox and ChromeFirefox 和 Chrome 之间 1 像素的行高差
【发布时间】：2011-05-25 06:47:27
【问题描述】：

在 asp.net 中使用母版页进行新网站设计。页面的标题是一个 35px 高的“菜单栏”，其中包含一个呈现为无序列表的 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 图像，一切正常。

编辑：

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

【问题讨论】：

一些 CSS 和附带的差异屏幕截图会有所帮助。
我肯定会在今晚发布它们。我只是好奇在此期间是否有任何明显的事情会导致这种情况。
添加了css和屏幕截图。提前感谢您的帮助！
如果你把它放在 fiddler 上会很好，这样我们就可以玩它并查看 HTML。
我对提琴手不是很熟悉...我可以说，如果我调整“a”元素的行高（上面我的css中的当前17px）并将其设置为18px，它看起来很好在 chrome 中......但当然它在 Firefox 中的 1px 太高了......我也在 IE 中测试过它，它在那里也能正常工作。

标签： asp.net css firefox google-chrome

【解决方案1】：

你也可以为 mozila 制作不同的 css：

-moz-height:2em;

也可以使用：

@-moz-document url-prefix{
    // your css
}

【讨论】：

【解决方案2】：

如果 line-height 用于垂直对齐容器中的文本（它不应该这样做），则可以像这样强制跨浏览器的一致行为：

line-height: 75px
height: 75px
overflow: hidden

【讨论】：

【解决方案3】：

我想这是唯一的方法，对于不同的浏览器有问题的部分使用不同的样式

/* FOR MOZILLA */
@-moz-document url-prefix() { 
.selector {
 color:lime;
}
}
/* FOR CHROME */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
/* Safari and Chrome, if Chrome rule needed */
.container {
 margin-top:100px;
}
/* Safari 5+ ONLY */
::i-block-chrome, .container {
 margin-top:0px;
}``

【讨论】：

【解决方案4】：

这是我在this page 找到的解决方案：

   button::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

【讨论】：

【解决方案5】：

尝试使用带有 a 元素的 display:block" 比如……

<li><a href="">Link</a></li>

css:

li{line-height:20px;}/*example only*/

li a{display:block;}

【讨论】：

【解决方案6】：

我遇到了类似的问题，这是由于使用 em 来表示字体大小、边距和填充。浏览器对 em 进行了不同的舍入，并根据内容的长度在整个网站上造成间歇性的 1px 问题。将所有内容更改为像素测量后，我的问题就消失了。

希望这会有所帮助！

【讨论】：

【解决方案7】：

我通过设置以下内容设法使用我正在使用的网络字体解决了这个问题：

.some-class {
    display: inline-table;
    vertical-align: middle;
}

当然，这有点老套，但确实可以。这确实意味着您将拥有专门针对 Internet Explorer 的目标样式

【讨论】：

【解决方案8】：

我的主标签在 Chrome 中显示时遇到了同样的问题，它们的高度相差一个像素，并且在标签和主机的白色背景之间留下了一个难看的缝隙。

我通过为选项卡 div 提供带有浮动值的上边距解决了这个问题。首先尝试 margin-top:0.1px ，然后是 0.2 等，直到上边距为 0.5 时，所有主要浏览器都可以正常显示。

【讨论】：

【解决方案9】：

我遇到过与具有透明背景的文本有关的问题。

我无法让上述任何解决方案始终如一地工作，因此我最终使用了 webkit hack 来为这些浏览器提供不同的行高。像这样：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .your-class {
        line-height:20px;
    }
}

Eww，哈克！我试图避免 CSS hack，但我找不到其他方法。我希望对某人有所帮助。

【讨论】：

【解决方案10】：

我遇到了完全相同的问题，结果发现 chrome 将缩放设置为 110%，这破坏了菜单。当我在另一台计算机上启动 chrome 时，我注意到了它，它看起来很好。

【讨论】：

【解决方案11】：

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

设置：

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

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

对于菜单、按钮等项目，尤其是非常小的通知气泡，请将行高重置为正常值，并使用填充或边距使它们的行为相同。

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

【讨论】：

Fwiw，我认为这是最好的答案。 { 行高：正常； padding: xyx } 解决了这个错误。
这实际上是一个答案，而不是放弃的理由（就像接受的答案一样）。如果你让 line-height 保留空间，你确实会在这里和那里遇到奇怪的像素差异。使用 padding/margin 保留空间，解决了这个问题。
刚刚拯救了我的一天......！！！！行高：正常；为我做了诀窍:)）））））我真的很沮丧......
只需添加“line-height: 1;”解决了我遇到的问题！太棒了！
赞成。尽管我完全同意所选答案，但我正在处理其中一个案例，我被要求让它以完全相同的方式显示，像素完美，而你的答案结束了疯狂。感觉像 90 年代：\ 无论如何，谢谢！

【解决方案12】：

我可能是 CSS 的初学者，但我在 W3Cschools.com 的其中一个示例中发现了同样的问题。

http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav

这个例子是关于图像精灵的。您可以在此示例中看到，在 Chrome 中，主页图标和上一个图标具有 1px 分隔线，而在 Firefox 中则不然。

Chrome 的像素数似乎与 Firefox 的像素数相差 1 个像素。

【讨论】：

【解决方案13】：

我刚刚遇到了同样的问题，我通过在包含作为选项卡链接的<a> 元素的<li> 元素中显式设置行高和字体大小来解决它。希望这对将来的人有所帮助。

（编辑的 html 链接）

【讨论】：

嗯，它剥夺了我的标签引用。应在包含链接元素的 li 标签上设置行高和字体大小。

【解决方案14】：

我已经和这个问题斗争了一段时间，几乎放弃了像素。然而，在其中一个 eurika 时刻我想到了：如果您在 Chrome 中完美排列选项卡（在 Firefox 中留下重叠），请将 ul 高度设置为 li 的高度（包括任何填充），您可以删除通过在 ul 上将溢出设置为隐藏来解决 Firefox 中的违规像素。

希望这可以帮助那里的人！

【讨论】：

【解决方案15】：

重要的是要认识到网页在不同浏览器中的呈现方式总是不同的。实现像素完美是徒劳的，现在我试图向我的客户解释要让每个浏览器呈现完全一样的网站所涉及的成本。现在更常见的是，他们明白 IE6 和 FF4 永远不会以相同的方式呈现任何页面。我们必须努力让我们的客户了解并接受网络的动态。

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

【讨论】：

同意。但是，我必须假设这个问题是由我忽略的代码中的错误引起的。在设计方面我真的是一个初学者，并且不完全相信我的 css 技能哈哈。
不要低估自己的力量。 :-) 问问你自己（或客户）什么对客户最有利——你找到了那个像素或者给他们带来了更多的功能、更多的测试或其他有用的东西。时间就是金钱就是质量。
虽然我同意这个座右铭，但这不是问题的答案，也无助于解决问题。像素完美是可能的。
这个答案没有回答这个问题，当然我在某种程度上同意你的看法，但也许项目要求浏览器以单像素完美匹配..如果客户需要，这可以实现
这个答案根本没有帮助。只是帮助回答或不发布任何内容

【解决方案16】：

这是我在一些网站上遇到的常见问题...当 IE 具有像素差异时，我通常可以在我的 IE 样式表中添加一个边距/填充像素。但是当它是 Safari/FireFox/Chrome 时，我通常只使用像素并让 FireFox 人群高兴（现在——直到 Webkit 统治网络！），即使它在对面的浏览器中看起来有点奇怪。

但是，您可能还想检查包含 ul 或 div 元素的行高值（或添加一个值，如果还没有）。对此进行修改后，我可以在 FireFox、Chrome 和 IE 中获得完全相同的填充。

【讨论】：

我一定会检查 ul 上的行高，看看是否有帮助。我真的很想避免为各种浏览器使用多个样式表。
如今，一旦你做了比“Hello, world”更高级的事情，这几乎是不可避免的；-)
请不要在没有先尝试很多其他东西的情况下进行多样式表舞蹈。一些供应商特定的前缀 - 当然，但除非真的非常必要，否则不会加载不同的文件。