2012-02-10 4 views
1

ブラウザはIE7です。私はそれを支配していない。それは吸うが、それは私の世界だ。私はFF3.6でも起こっていることを確認しましたが、正直なところ、企業環境のために、IE7で動作する限り、そこで動作させるためのハングアップはありません。IE7で弾丸が見つからない

このHTML:このCSSで

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
    <link type="text/css" href="test.css" rel="stylesheet" /> 
</head> 
<body> 
    <div> 
    <ul> 
     <li>Top level a 
     <ul> 
      <li>level 2 a</li> 
      <li>level 2 b</li> 
      <li>level 2 c</li> 
      <li>level 2 d</li> 
     </ul> 
     <li> 
     <li>Top level b 
     <ul> 
      <li>another level 2 a</li> 
      <li>another level 2 b</li> 
      <li>another level 2 c</li> 
     </ul> 
     </li> 
     <li>Top level c 
     <ul>  
      <li>3 level 2 a</li> 
      <li>3 level 2 b</li> 
      <li>3 level 2 c</li> 
      <li>3 level 2 d</li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</body> 
</html> 

:私は何を期待

body { font: 12pt Verdana black; } 
/*yellow div entirely for visibility's sake*/ 
div { 
    width: 500px; 
    height: 125px; 
    background-color: yellow; 
} 
ul { 
    margin-left: 15px; 
    padding-left: 15px; 
} 
li { 
    margin-left: 15px; 
    padding-left: 15px; 
} 
div ul { 
    list-style-type: none; 
} 
div ul li { 
    font-weight: bold; 
    display: inline; 
    float: left; 
    width: 140px; 
} 
div ul li ul { 
    list-style-type: disc; 
} 
div ul li ul li { 
    font-weight: normal; 
    display: list-item; 
    width: 100% 
} 

: "トップレベル" の項目は左から右に行に表示されます 彼らのサブリストが表示されますそれぞれのトップレベル項目の下の垂直リストとして表示されます。サブリストには、各アイテムの前に弾丸としてのディスクもあります。

入手方法: トップレベルのアイテムは、左から右への縦のリストとして表示されます。しかし、弾丸は欠けている。

これは絶望的なケースですか?またはIE7を正しいコードで提出することができますか?ただ、ツリーまで

+1

読みやすくするために、HTMLをインデントする必要があります。 – thirtydot

答えて

3

を閉じる「トップレベル」からスラッシュが欠落しています。トップレベルのものだけをフロートさせたいのですか?その後、深いものにfloat:noneを適用します。また、表示タイプをインラインに変更する必要はありません。フロートは自分でトリックを行います。

ところで、フォント名は何ですか? Verdana Black?次に、名前の前後に引用符を入れることを強くお勧めします。

+0

ああ良かった。どうして私はフロートビットを見ることができなかったのですか?私は不自由を感じる。あなたがそれを指摘してうれしいです。私は急いで問題の最も簡単なデモを可能にして、フォント宣言で色を押し込もうとしています。 –

0

、BODYを追加します。

!importantに頼る
body div ul li ul { list-style-type: disc } 

は通常、あなたのCSSをファクタし直す必要があることを意味します。

セレクタをにすると、より具体的にはになります。通常、ほとんどのクラスをオーバーライドできます。

参照:http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

+0

セレクタ内の本文は表示を変更しません。 私は同意します!しかし、重要です。矛盾した指示はなく、この単純な文書にはあいまいさはありません。私は使用しないことを好む!重要。 –

0

liタグにそれを適用します。

+0

'list-style-type'はリストプロパティであり、' li'プロパティではありません。それでも、私はそれを試してみました。変化なし。 –

+1

実際、どちらかのためです。 – Zenexer

0

おそらく箇条書きがリストの表示領域外にある(非表示) 余分に動作していない場合は上記の回答を試してください。また、左から余白やパディングを試してください。

+0

私は30pxまでのパディングを変更しました。 –

0

弾丸の色が背景と一致していないかどうかを確認します。彼らはそれが問題であるかもしれないことに気づかないとそれを理解するのは難しいです。

alsあなたの要素をfirebugまたはchromesデバッガで調べる...セレクタが設定されていないと間違っている可能性があります。何かが設定されている場合、それは上書きされたり、問題は内部のどこかに深く座って、

2

フロートをloughing箇条書きを削除しているものであるとdiv ul lifloat: leftdiv ul li ul liによって継承されています。

解決策はありますか?

float: none~div ul li ul liを追加します。

また、あなたはあなたのすべての<li> sが浮遊しているli

+0

閉鎖の 'li'には良いキャッチがありますが、おそらく閉鎖タグであると思われる偽の' li'もあります。また、リスター氏の2分後に正しい解決策を得たので、私は彼にチェックマークを付けました。助けてくれてありがとう! –

関連する問題