1

私はこれに本当にイライラしています。数週間前、私はそれをFirefoxの両方で動作させました。つまり、問題なく動作しました。今日戻っていくつかのテストを行ったところ、Firefox の表示に問題が見つかりました。コードを検索しましたが、何も見つかりません。私は喜んで誰からでもいくつかのヒントを使うことができます.私は間違ったことを見ていると確信しています. Firefox のバージョンをアップグレードしましたが、Firefox ではなくコードが壊れていると思います。css ファイルのどこかに問題があると思いますが、よくわかりません。

ここまでで確認できたこと。設定をオーバーライドしている可能性のある < ul > または < li > との他の css ファイルでの競合はないようです。もう 1 つの確認は、これは Internet Explorer で正常に動作するということです...したがって、通常は逆である (FF では動作するが IE では失敗する) ため、私はばかであるに違いありません。

IE での表示は次のとおりです (テキストのすぐ横にあるフォルダー アイコンの位置に注意してください)。

代替テキスト http://www.redsandstech.com/ie_works.jpg

FF での表示は次のとおりです (フォルダ アイコンが対応するテキストと共に押し下げられていないことに注意してください)。
代替テキスト http://www.redsandstech.com/ff_broken.jpg

順序なしリストは次のとおりです。

<ul id="nav">
    <li><a>Utah</a></li>
        <ul>
           <li><a>ParkCity</a>
               <ul>
                  <li><a>Com1</a></li>
                      <ul>
                          <li class="folder_closed"><a>Timber</a></li>
                          <div>SQUARE CONTAINER IS INSIDE THIS DIV</div>
                      </ul>
               </ul>
        </ul>
</ul>

メニュー全体に使用される CSS は次のとおりです。

/*  MENU NAVIGATION (<UL><LI> LISTS
****************************************/
ul#nav{
/* This handles the main root <ul> */
    margin-left:0;
    margin-right:0;
    padding-left:0px;
    text-indent:15px;   
}
ul#nav div{
  overflow: hidden;
}

#nav li>a:hover { 
    cursor: pointer;
}
#nav li > ul{ 
/* This will hide any element with an id of "nav" and an "li" that has a direct child that is a "ul" */
    display:none; 
    margin-left:0px; 
    margin-right:0px;
    padding-left:15px;
    padding-right:0px;
    text-indent:15px;
}
#nav li {
    list-style-type:none;
    list-style-image: none;
}
#nav > li{
    vertical-align: top;
    left:0px;
    text-align:left;
    clear: both;
    margin:0px;
    margin-right:0px;
    padding-right:0px;
}
.menu_parent{
    background-image: url(../images/maximize.png);
    background-repeat: no-repeat;
    background-position: 0px 1px; 
    position:relative;
}
.menu_parent_minimized{
    background-image: url(../images/minimize.png);
    background-repeat: no-repeat;
    background-position: 0px 1px; 
    position:relative;
}
.folder_closed{
    position:relative;
    background-image: url(../images/folder_closed12x14.png);
    background-repeat: no-repeat;
    background-position: 0px -2px; 
}

.folder_open{
    position:relative;
    background-image: url(../images/folder_open12x14.png);
    background-repeat: no-repeat;
    background-position: 0px -2px; 
}
</ul>
4

4 に答える 4

2

IE と他のブラウザーの CSS の最大かつ最も苛立たしい違いの 1 つに遭遇しました。

私のアドバイスは、リセット スタイルシートを使用し、ツリー アイコンのスタイルをコンテナーの backgroundImages として設定することです。

たとえば、ツリー アイテムの 1 つが

<div class="folder">This is a folder</div>

次の CSS があります。

.folder {
  background-image: url(someImage.png);
  background-repeat: no-repeat;
  background-position: 0 0; /* or wherever you like */
  text-indent: 20; /*enough room for a 16x16 icon with a little space to the right */
}

}

私は、UL>LI の組み合わせではなく、常にDIV を使用してこの種のことを行います。YMMV。UL>LIでも同じことができますが、箇条書きの場所などの違いは好きではありません。とにかくリセットスタイルシートを使用すると、LIコンテナーをDIVに似たものに変換するだけです.とりあえず。

于 2010-04-13T17:51:12.957 に答える
1

マークアップにいくつかのエラーがあるため、DOM を生成する方法はブラウザー次第です。

ulor anotherliではなく、子としてのみ持つことができます。マークアップを修正して、何が起こるか見てみましょう。divul

于 2010-04-13T18:33:16.617 に答える
0

テストしませんでしたが、これは、IEがパディングを使用しているのに対し、FFがマージンを使用して箇条書きを設定しているという事実に関係している可能性があります。それともその逆ですか？忘れた。

于 2010-08-02T13:20:38.453 に答える
0

リストでoverflow:hiddenを使用すると、Firefoxで問題が発生します。overflow:hidden を取り出してみて、状況が変わるかどうかを確認してください。

私の問題では、overflow hidden を使用すると、順序付きリストに A.、B.、C. が表示されなくなります。または 1.、2.、3. など... (箇条書きのない順序付けられていないリストに変換します)

于 2010-08-02T10:00:11.337 に答える