0

サイトのデザインに取り組んでいますが、すべてのブラウザーで正しく機能しないタブに悩まされています。サイトはこちら: http://www.designmeditations.com/stc4-1/

現在のバージョンの Chrome では問題なく表示されます。FF では、1 ピクセル低くぶら下がっています。1 ピクセル上に移動すると、FF で見栄えがよくなり、ホバーすると Chrome の下部に沿って 1 ピクセルの線が表示されます。

提案？私は通常、順序付けられていないリスト要素の画像を使用してこれらの遷移を行いますが、この特定のケースでは画像を使用する必要があるとはまったく考えていませんでした。

ありがとう。

4

1 に答える 1

0

あなたが話している違いはわかりませんが、タブの良い習慣は、行の高さをピクセルで指定することです。そこから追加line-height: 20pxして調整してみてください。ほとんどの場合、不一致が修正されます。

#mainnav a {
  background: transparent;
  padding: 6px;
  border: #0A4F91 solid 1px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  color: white;
  text-decoration: none;
  margin-right: 10px;
  line-height: 20px;
}
于 2012-04-19T03:23:26.043 に答える