0

我正在尝试在网页上显示一个简单的选项卡菜单。我正在使用一个非常基本且使用良好的模式，它工作正常，除了当我在 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（右）看到的结果：

在此处输入图像描述

删除样式声明的 font-family 行会使问题消失，但我不想对主站点这样做。欢迎对正在发生的事情进行解释或提出变通方法的建议！

4

2 回答 2

4

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

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

于 2011-06-07T14:27:26.727 回答
1

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

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

只是猜测...

于 2011-06-07T14:28:20.487 回答