0

ナビゲーション バーは、IE 8 以降および他のすべてのブラウザーで正しい方法 (水平方向) に表示されます。ただしIE 5.5、6、7のみ斜めに表示されます。どんな体も助けてくれますか?

.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}

.top-nav li {
margin-left: 220px;
}

.top-nav a {
display: block;
float: left;
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #FFF;
}

.top-nav a:hover {
background:  #272727;
color: #18942f;
}

.top-nav .current_page_item a {
background:  #252525;
color: #FFF;
}

HTML

<div class="top-nav"> 
  <ul> 
    <li><a href="index.html" class="links">Home</a></li> 
    <li><a href="aboutme.html" class="links">About Me</a></li> 
    <li><a href="skills.html" class="links">Skills</a></li> 
    <li class="current_page_item"> <a href="#">Contact</a></li> 
    </ul> 
</div>

ここにスクリーンショットがあります

4

2 に答える 2

0

私はこの問題を何度も見てきました。LI 内にある A ではなく、LI をフロートさせたいとします。

[.top-nav a] クラスから [float:left] を削除し、[.top-nav li] クラスに追加するだけです。CSS は次のようになります。

.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}

.top-nav li {
margin-left: 220px;
float: left;
}

.top-nav a {
display: block;
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #FFF;
}

.top-nav a:hover {
background:  #272727;
color: #18942f;
}

.top-nav .current_page_item a {
background:  #252525;
color: #FFF;
}
于 2013-09-06T18:22:50.263 に答える
0

各リンクをフローティングする代わりに、li で display:inline を使用してみませんか? display: inline は IE 5.5 で動作します

また、リンクが下に移動する原因となっている「display: Block」を削除する必要があります。

.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}

.top-nav li {
 display: inline;
}

.top-nav a {
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #aaa;
}​

http://jsfiddle.net/YJjya/

アイテムをブロックにする必要がある場合は、インライン ブロックを使用します。古いバージョンまたは IE で動作させるための回避策については、インライン ブロックの回避策を参照してください。

また、最初の head タグの直後に配置する便利なコードを次に示します。ユーザーが IE 7 以降を使用している場合にのみ表示され、一緒になって新しいブラウザーをダウンロードするように指示されます。IE のすべてのバージョンでサイトが機能するようにしようとするのは時間の無駄です。最初から明らかにインターネットに詳しくない少数の人々を喜ばせるために、頭を悩ませることになるからです。マリオが言ったように、世界の 6% しかまだ IE6 を使用していません... しかし、米国や英国などの国を詳しく見てみると、その数は 1% 未満です。

アフターヘッド

<!--[if lt IE 7]>
    <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->

CSS

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
于 2012-11-10T11:15:22.297 に答える