Question

我正在尝试在网页上显示一个简单的标签菜单。我正在使用一个非常基本且使用得很好的模式，这种模式工作得很好，除了当我在Chrome中测试页面时（好吧，Chromium但afaik它是相同的）我看到一个1像素宽的神器，我似乎无法看到掩盖。

这是测试代码：

<!DOCTYPE html>
<html>
<head>
  <title>One pixel menu bug</title>
  <style>
body {
  font-family: sans-serif;
  margin: 0;
}
h1 {margin-bottom: 1em}
#menu {
  padding-top: .3em;
  padding-bottom: 0;
  z-index: 1;
  background: black;
  font-size: 1em;
  margin-top: 0.5em;
}
#menu ul {
  list-style: none;
  border: 0 none;
  padding: 0;
  margin-left: 2em;
  border-bottom: 1px solid black;
}
#menu li {
  display: inline;
  margin-right: .15em;
  background-color: white;
}
#menu li a {
  text-decoration: none;
  color: #99a;
  padding: 0px 12px;

}
#menu a.selected {
  font-weight: bold;
  color: black;
  border-bottom: 2px solid white;
}
  </style>
</head>
<body>
  <h1>Site title here</h1>
  <div id="header">
    <div id="menu">
      <ul>
        <li><a href="#">Are we not men?</a></li>
        <li><a href="#" class="selected">We are Devo</a></li>
      </ul>
    </div>
  </div>
  <p>Lorem ipsum</p>
</body>
</html>

以及我在Chrome（左）和Firefox（右）中看到的结果：

enter image description here

删除样式声明的font-family行使问题消失，但我不想为主站点执行此操作。关于正在发生的事情的解释，或者对于解决方案的建议表示欢迎！

Answer 1

并非所有浏览器都会将字体呈现完全相同的高度。此外，您将像素测量与点测量（em）混合在一起，这也可能导致舍入问题。

我认为您可以通过指定行高或菜单项的确切高度来轻松解决此问题。和/或设置相对于菜单底部的位置。据我所知，你做得更新，所以他们的确切位置现在完全基于渲染字体的高度。

Answer 2

我认为你有一个行高问题 - 无衬线字体有不同的高度/字形而不是衬线/单声道？

尝试设置line-height以及font-family - 1.5em - 12 px font = 18px line-height？

猜猜......

Font-family导致Chrome中出现一个像素绘制问题

2 个答案: