css、順序付け一覧表示されないアイコン。

StackOverflow https://stackoverflow.com/questions/2631843

  •  26-09-2019
  •  | 
  •  

質問

と思います。数週間前にログインしてくださの両方をfirefoxおよびieだけます。に戻り、今日にいくつかの試験から、問題をディスプレイをfirefoxとってのコードはできません.使ってみましたいくつかアドバイから望と思いますが、その中で何を探しているためです。した私のfirefoxバージョンも思います自分のコードが壊れたい。私はこの問題はどこか私のcssファイルが本当のところはわからないけど。

こんどろ風mikiモデルを作ってみが確認です。ありそうにないから紛争その他のcssファイル < ul>'s < li>'sれをオーバーを設定します。その他の確認がで動作すること微Internet Explorer...そんな敵が邪魔なのでごり押しので、それが通常の（FFが、失敗をIE）

このように見えIE(予告の位置にフォルダアイコンのテキスト):

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

このように見えFF（お知らせフォルダのアイコンは押し下げると対応することが可能です。
altテキスト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>
役に立ちましたか？

解決

あなたはIEと他のブラウザ間の最大かつ最もイライラCSSの違いの一つに遭遇した。

私のアドバイスは、リセットスタイルシートを使用することで、及びその容器のbackgroundImagesとしてスタイルツリーのアイコンに。

たとえば、あなたのツリー項目のいずれかがあるかもしれない。

<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 */
}

}

私はこの種のものを行うの常にのdiv要素ではなく、UL> LIの組み合わせを使用して。 YMMV。あなたは、UL> LIと同じことを行うことができますが、私は弾丸が配置される場所の違いなど好きではない、とあなたはとにかくリセットスタイルシートを使用している場合、あなたは単にDIVに似た何かにLIコンテナを変換しますとにかくます。

他のヒント

それはDOMを生成する方法をブラウザにアップしているように、あなたのマークアップは、多少の誤差があります。

ulは一人っ子としてli、ないdivまたは別のulを持つことができます。マークアップを修正し、何が起こるか見ています。

私のリストに隠された：私はオーバーフローを使用するときに

私はFirefoxで問題を抱えてきました。オーバーフローを取り出してみます。隠された、それは物事を変えるかどうかを確認します。

私の問題のために、私用のオーバーフローその後、隠されている場合、それは彼らのA.、B.、Cを表示しないように私の注文したリストを引き起こします。または1.、2.、3等...（なし箇条書きと番号なしリストになり、それを、）

テストしていないが、これはFFがIEのパディングを使用しながら、箇条書きのマークを設定するためにマージンを使用するという事実としなければならないことがあります。それとも、他の方法で回避のですか？お忘れます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top