CSS Firefox 和 Chrome 之间的 1 像素线高差
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4439537/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
1 pixel line height difference between Firefox and Chrome
提问by stephen776
Working on a new site design in asp.net with master pages. Header of the page is a 35px tall "menu bar" which contains an asp menu control rendered as an unordered list.
使用母版页在 asp.net 中设计新站点。页面的标题是一个 35px 高的“菜单栏”，其中包含一个呈现为无序列表的 asp 菜单控件。
The selected menu item is styled with a differenct colored background and 2px border around the left top and right sides. The bottom of the selected menu item should line up with the bottom of the menu bar so the selected "tab" looks as if it flows into the content beneath. Looks fine in firefox and IE but in chrome the "tab" seems to be 1 pixel higher than the bottom of the menu bar.
所选菜单项的样式具有不同的彩色背景和左右两侧 2px 的边框。所选菜单项的底部应与菜单栏的底部对齐，这样所选的“选项卡”看起来就好像流入下面的内容。在 Firefox 和 IE 中看起来不错，但在 chrome 中，“标签”似乎比菜单栏底部高 1 个像素。
Just wondering if there is some sort of bug I dont know about.
只是想知道是否有某种我不知道的错误。
I realize that you will most likely need code to help with this problem so ill post up the css as soon as possible.
我意识到您很可能需要代码来帮助解决此问题，因此请尽快发布 css。
EDIT:
编辑：
here is the css for the menu...
这是菜单的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;
}
The selected classes are added to the li and a elements via jquery...
选定的类通过 jquery 添加到 li 和 a 元素...
Here is a screenshot of the problem... The chrome example is on the top and u can see 1px of red border below the tab. On the bottom is the firefox image where everything looks OK.
这是问题的屏幕截图... chrome 示例在顶部，您可以在选项卡下方看到 1px 的红色边框。底部是 Firefox 图像，一切正常。
EDIT:
编辑：
After playing around with this a bit more, I have discovered that it is actually the "header" div itself that is growing by 1px in chrome... This seems very strange to me.
在玩了更多之后，我发现它实际上是“标题”div 本身在 chrome 中增长了 1px ......这对我来说似乎很奇怪。
采纳答案by Niklas Wulff
It's important to realize that web pages will always render differently in different browsers. Acheiving pixel perfection is futile, and nowadays I try to explain to my clients what kind of cost is involved to make every browser render the site exactly alike. More often now, they understand that IE6 and FF4 won't ever render any page the same way. We must try to make our clients understand and embrace the dynamics of the web.
重要的是要意识到网页在不同浏览器中的呈现方式总是不同的。实现像素完美是徒劳的，现在我试图向我的客户解释使每个浏览器呈现完全相同的网站需要什么样的成本。现在更多的是，他们明白 IE6 和 FF4 永远不会以相同的方式呈现任何页面。我们必须努力让我们的客户了解并接受网络的动态。
Progressive enhancement and graceful degradation. Peace.
渐进增强和优雅降级。和平。
回答by mahalie
None of these answers solve the problem.
这些答案都不能解决问题。
Set:
放：
line-height: 1;
padding-top: 2px;
Because webkit & mozilla rendering engines implement line height differently do not use this it to manipulate measurement for single line items.
因为 webkit 和 mozilla 渲染引擎以不同的方式实现行高，所以不要使用它来操纵单个行项目的测量。
For items like menus, buttons and especially really small notification bubbles, reset the line-height to normal and use padding or margins to make them behave the same.
对于菜单、按钮和特别小的通知气泡之类的项目，将行高重置为正常，并使用填充或边距使它们的行为相同。
Here's a JSFiddle illustrating this issue: http://jsfiddle.net/mahalie/BSMZe/6/
这是说明此问题的 JSFiddle：http: //jsfiddle.net/mahalie/BSMZe/6/
回答by Jarrett
I just had this same problem, and I solved it by explicitly setting the line height and font size in <li>element that contains the <a>elements that are the tab links. Hope this helps someone in the future.
我刚刚遇到了同样的问题，我通过在<li>包含<a>标签链接元素的元素中显式设置行高和字体大小来解决它。希望这对未来的人有所帮助。
(edited html links)
（已编辑的 html 链接）
回答by geerlingguy
This is a common issue I run into on some of my sites... when it's IE having the pixel difference, I can usually just add a pixel of margin/padding in my IE stylesheet. But when it's Safari/FireFox/Chrome, I usually just live with the pixel and make the FireFox crowd happy (for now—until Webkit rules the web!), even though it looks a little strange in the opposite browser.
这是我在我的一些网站上遇到的一个常见问题......当它的 IE 具有像素差异时，我通常可以在我的 IE 样式表中添加一个像素的边距/填充。但是当它是 Safari/FireFox/Chrome 时，我通常只使用像素并让 FireFox 人群高兴（现在 - 直到 Webkit 统治网络！），即使它在对面的浏览器中看起来有点奇怪。
However, you might also want to check out the line-height values (or add a value, if there isn't one already) on the containing ulor divelement. Tinkering with that allowed me to get the padding exactly the same in FireFox, Chrome and IE.
但是，您可能还想检查包含ul或div元素上的行高值（或添加一个值，如果还没有）。修改它让我在 FireFox、Chrome 和 IE 中获得完全相同的填充。
回答by Maxulus
回答by DJ Quilter
I have been fighting with this problem for a little while now, and almost gave up on the pixel. However it's come to me in one of those eurika moments: if you get the tab lined up perfectly in Chrome (which leaves an overlap in Firefox), set the ul height to the height of the li (including any padding), you can remove the offending pixels in Firefox by setting overflow to hidden on the ul.
我已经与这个问题斗争了一段时间，几乎放弃了像素。然而，在其中一个 eurika 时刻出现在我面前：如果您在 Chrome 中完美地排列标签（在 Firefox 中留下重叠），将 ul 高度设置为 li 的高度（包括任何填充），您可以删除通过在 ul 上将溢出设置为隐藏来消除 Firefox 中的违规像素。
Hope this helps someone out there!
希望这可以帮助那里的人！
回答by Alexander
I had the same problem with my main tabs displaying them in Chrome, they were one pixel off in height and there for leaving an ugly slit between the tabs and the white background of the mainframe.
我的主选项卡在 Chrome 中显示它们时遇到了同样的问题，它们的高度相差一个像素，并且在选项卡和大型机的白色背景之间留下了一个难看的缝隙。
I solved the problem by giving the tab div an upper margin with a floated value. First tried margin-top:0.1px nothing then 0.2 etc. until with an upper margin of 0.5 everything displayed fine over all the major browsers.
我通过给选项卡 div 一个带有浮动值的上边距解决了这个问题。首先尝试 margin-top:0.1px nothing 然后是 0.2 等等，直到 0.5 的上边距在所有主要浏览器上都显示正常。
回答by artfulhacker
I had the exact same issue, turns out chrome had zoom set to 110% and that was breaking the menu. I noticed it when I fired up chrome on another computer and it looked fine.
我遇到了完全相同的问题，结果 chrome 将缩放设置为 110%，这破坏了菜单。当我在另一台计算机上启动 chrome 时我注意到了它，它看起来不错。
回答by kdev
I've come across this problem in relation to text with transparent backgrounds.
我遇到过与具有透明背景的文本有关的这个问题。
I couldn't get any of the above solutions to work consistently so I ended up using a webkit hack to give those browsers a different line-height. Like so:
我无法让上述任何解决方案始终如一地工作，因此我最终使用了 webkit hack 为这些浏览器提供了不同的行高。像这样：
@media screen and (-webkit-min-device-pixel-ratio:0) {
.your-class {
line-height:20px;
}
}
Eww, hacky! I try to avoid CSS hacks but I just couldn't find another way. I hope that helps someone.
呃，哈奇！我试图避免 CSS hacks，但我找不到其他方法。我希望能帮助某人。
回答by insaneray
I guess this is the only way , use different styles for different browsers the problematic sections
我想这是唯一的方法，对不同的浏览器使用不同的样式有问题的部分
/* 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;
}``
回答by Mario
if line-heightis used for vertically aligning text in a container (which it shouldn't), then consistent behaviour across browsers can be enforced like this:
如果line-height用于垂直对齐容器中的文本（它不应该），那么可以像这样强制执行跨浏览器的一致行为：
line-height: 75px
height: 75px
overflow: hidden
