1

各リストアイテムの背景画像を含む順序付けられていないリストがdiv内にあります。ただし、リストはInternetExplorer8で正しく表示されません。

レンダリングされた出力http://img694.imageshack.us/img694/7204/screenshotjv.jpg

問題は、リストの左側と上部にスペースが多すぎることです。各リストアイテム間だけでなく。リストをその上の画像セクションと完全に一致させて、各アイテムの左側、上部、または間に空白がないようにします。

HTML：

<div id="top">
    <div id="topimage">
        <center>
            <img src="image.jpg" alt="image"/>
        </center>
    </div>
    <ul class="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

CSS： 

#top { 
    width: 255px; 
    float:left; 
    margin:3px; 
}

#topimage {
    width: 245px;
    border:1px solid #bcc5c8;
    padding:3px;
}

.list li {
    background-image:url(../images/list_sub.jpg);
    width: 245px;
    height:23px;
    list-style:inside;
    list-style-image:url(../images/listarrow.gif);
    margin:0px;
    padding:0px;
}

マージンとパディングをゼロに設定しようとしましたが、うまくいきませんでした。また、画像の周囲に余分なスペースがないことを確認しました。助言がありますか？

4

1 に答える 1

0

調整できるものは次のとおりです。

  1. リストアイテムの内容をスパンでラップし、代わりにリストアイテムの矢印をスパンに適用します。スパンには、矢印gifの幅よりもわずかに大きい左のパディング値を指定します。

  2. list-style-imageプロパティは使用せず、list-styleを指定するだけです。none; 左揃えのxブラウザを取得します。通常、list-style-imageの代わりにlistアイテムのbackground imageプロパティを使用する必要がありますが、liの背景画像もあるため、追加のスパンが必要です。

  3. 幅と高さを適用するのと同じ要素にパディングを適用しないでください。クロスブラウザはレンダリングされません。代わりに、親要素に幅/高さを指定し、内側のラッパー要素にパディングを指定します。

  4. 通常、idルールは避ける必要があります。これらは非常に具体的であり、再利用できないスタイル定義になります。これらは、スタイル定義のオーバーライドを困難にします。

  5. リストアイテムを互いに接触させるには、リストアイテムに指定されている行の高さが要素の高さ以下であることを確認してください。list-item-styleで修正できると思いますが、この設定も再確認してください。

それでも問題が解決しない場合は、背景画像へのリンクを投稿してください。小さな例をモックアップします。

于 2012-05-10T21:19:00.270 に答える