1

誰かが私がいくつかのクロスブラウザの問題を修正するのを手伝ってもらえますか？私のウェブサイトのアドレスはhttp://s423839726.onlinehome.us/index2.htmlです。Firefox 13では問題ないように見えますが、IE9では「連絡先」ボタンがすべて不安定です。

また、ブラウザ間の不整合を修正する方法をどこで学ぶことができますか？

4

1 に答える 1

0

この矛盾は Opera でも見られます。あなたの問題はUL要素です。表示の「インライン」セットがあり、迷子の A 要素が含まれているため、右側のその位置にぶら下がっています。この組み合わせにより、連絡先メニュー要素が少し下に移動します。マークアップには、厳密には必要ないネストされた要素 (主に A 要素) が含まれているため、クリーンアップを試みる必要があります。もう 1 つの問題は、左右のフローティングが混在していることです。さらに、左右のパディングとマージンを混在させているため、ブラウザで異なる動作が発生したり、計算が難しくなったり、マージンの崩壊の問題が発生したりする可能性があります。次のようなメニューのよりセマンティックなマークアップを試すことをお勧めします。

<ul id="topnav">
    <li><a href="about.html">About</a></li>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

このシンプルなマークアップを使用して、メニューのスタイルを設定できます。要素のサイズ、パディング、およびマージンを調整しても希望どおりにスタイルを設定できない場合は、LI 要素または A 要素内に非セマンティック要素 (SPAN 要素など) を導入して、さらに手段を講じることができます。 CSSを介して物事をシフトします。

ナビゲーションのスタイルを設定する簡単な方法は次のとおりです。各 LI を左にフロートさせ、左のマージン/パディングのみを使用して視覚的なスペースを作成します。

ul {
    list-style-type: none;
    height: 60px;
    width: 300px;
    margin: auto;
}

li {
    float: left;
}

ul a {
    padding-right: 32px;
    padding-left: 32px;
    display: block;
    line-height: 50px;
    text-decoration: none;
    font-size: 40px;
    color: #ccc;
}

ul a:hover {
    color: #fff;
}

そんな感じ。左の境界線がまだありません。メニューブロック全体（UL）は、左パディングまたは右フローティングなどを使用して右に配置する必要があります。ページの他の場所での UL および LI スタイルの変更を軽減したい場合は、セレクターの前に #topnav を付けます。これは、希望するような水平メニューを作成するために多くのマークアップやスタイルを必要としない単純な図です。簡単に始めて、UL/LI を使用して水平メニューのチュートリアルを検索してください。そこにはたくさんあります。幸運を。

于 2012-07-24T19:32:04.897 に答える