0

サイト testing.ksischool.com のメイン ナビゲーション エリア (ロゴの下の灰色のバー) のリンクの :hover CSS は、Firefox では問題なく動作しますが、IE7 では下部の数個のパディング ピクセルが切り取られます。なんで？

4

2 に答える 2

8

トップナビゲーションについて話していると思います。インライン要素 (<a>タグ) をパディングしています。インライン要素にパディングを配置すると、水平パディングは他の要素を押し付けますが、垂直パディングは要素のサイズを大きくするだけで、周囲のレイアウトには影響しません。おそらく Firefox はソース内の要素の下にボックスをレンダリングしていますが、何らかの理由で IE はそれらを下にレンダリングしているため、ボックスの一部が消えています。

この問題を解決するには、すべてのリンクをフロートさせて残します (これにより、実質的にリンクがブロック要素に変わります)。マークアップを機能させるには、他の場所でマークアップを調整する必要があります (すぐにフロートすると、クリアの問題が発生する可能性があります) が、その特定の IE の問題は修正されるはずです。

詳細については編集:

上で述べたように、インライン要素の垂直方向のパディングは期待どおりに動作しません (要素の高さを増やしますが、パディングは他のページ要素と相互作用しないため、インライン要素は奇妙な方法で重なり合うことがよくあります)。したがって、これを修正するには、パディングされた要素 (<a>タグ) にdisplay: block. すべてを同じライン上に保つには、左にフロートするのが最善の策です。使用するマークアップとスタイリングは次のとおりです。

<style type="text/css">
.mainnav {
    font-size: 1em;
    color: #999;
    list-style-type: none;
    /* zoom triggers hasLayout on IE, ignored by others
    Necessary for the clearfix */
    zoom: 1;
}

.mainnav:after {
    /* This lets the .mainnav auto-clear its floated contents */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.mainnav li {
    float: left;
    margin: 0 2px;
    /* Place background (disc image) here w/ appropriate padding */
}

.mainnav li.last {
    background: none;
}

.mainnav a:link, .mainnav a:visited {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 1px 1px 2px;
    border: solid 1px transparent;
}

.mainnav a:hover {
    color: #fff;
    background: #999;
    text-decoration: none;
    padding: 1px 1px 2px;
    border: solid 1px #ccc;
}

.mainnav a.selected, .mainnav a.selected:hover {
    color: #B59B24;
    background: transparent;
    text-decoration: none;
}
</style>

<ul class="mainnav">
    <li><a href="/" class='selected'>Home</a></li>
    <li><a href="/About" >About</a></li>
    <li><a href="/Admissions" >Admissions</a></li>
    <li><a href="/Curriculum" >Curriculum</a></li>
    <li><a href="/Home/VacancyList" >Careers</a></li>
    <li class="last"><a href="/Contact" >Contact</a></li>
</ul>

注意すべき点: 標準の clearfix を使用して (何を言っているのかわからない場合は Google で検索してください)、UL がフローティング コンテンツをクリアしていることを確認します。これにより、ユーザーがフォントのサイズを大きくした場合に、親 nav 要素のサイズを適切に拡大できます。

また、スペーサーを削除し、CSS で&middot;背景画像とクラスを使用することをお勧めします。.lastこれは純粋に個人的な好みです。(理想的な世界では、:after 疑似クラスを使用して を注入し&middot;ますが、IE 6 がサポートしていないため、それを行うことはできず、すべてのブラウザーをサポートすることはできません。)マークアップにそのままにしておくと、マークアップがきれいになり、後で変更するのがはるかに簡単になります (たとえば、クライアントがドットではなくパイプが必要であると判断した場合)。

このマークアップ/スタイリングの背後にあるロジックは<a>、境界線/背景色が機能するためにパディングが必要であるということです。つまり、 display: block. ただし、それを追加すると、すべてのリンクが別の行に貼り付けられるため、リンクまたはその親のいずれかを浮動させる必要があります。これはリストの一部であるため、li親をフロートさせ、clearfix を使用ulしてページ上に存在することを確認する方が簡単です。

#nav_banner element明らかに、このコードを使用する場合、スタイルシートの下位にあるほとんどのものを削除する必要があり、おそらくクロスブラウザーを再度デバッグする必要があります。そうでない場合でも、将来的にトップ ナビゲーションを簡単に構築するためのアイデアが得られることを願っています。

于 2009-02-07T06:26:55.163 に答える
0

display: inline-block を a 要素に追加してみてください。互換性はわかりませんが、IE7 と FF で動作します。

編集：One Crayonのソリューションは間違いなく優れており、より一般的な方法です.

于 2009-02-07T06:20:21.120 に答える