0

Webページに簡単なタブメニューを表示しようとしています。私はかなり基本的でよく使われているパターンを使用していますが、Chromeでページをテストすると（Chromiumですが、同じです）、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-12px font = 18px line-height？

推測するだけ...

于 2011-06-07T14:28:20.487 に答える