0

<nav>リンクの順序付けられていないリストを含むを設定し、それぞれに10pxの境界線を設定しました<li>。

私が使用しているフォントは、各文字の上に大きなスペースがあるため、リンクを設定position: relativeし、親からの境界線にぴったり合うように、リンクを6ピクセル上に押し上げました<li>。

これは、IE7（および場合によってはそれより下）を除いてすべて正常に機能します。IE7では、全体<li>とその子<a>が6ピクセル上に押し上げられているように見え、ナビゲーションがずれてしまいます。

これが私のコードを表示するjsfiddleです：http：//jsfiddle.net/SD3Xj/

ライブサイトを見てIE7でどのように表示されるかを確認したい場合は、http：//jasonbradberry.comにあります。

これを修正するための提案はありますか？

4

1 に答える 1

0

これらの CSS ルールは、発生している問題を修正します。

nav { margin-top: -80px; padding-bottom: 33px; }

nav ul { float: right; position: relative; }

nav li { float:left; display:inline; border-top: 10px solid #7a7a7a; margin-right: 16px; }

nav li.active { border-top: 20px solid #29cf86;}

nav a {}

CSS ルールを上記のものに置き換えるだけです。

于 2012-11-08T21:59:17.603 に答える