1

私はオンライン履歴書をデザインしているところですが、グーグルクロームとIE7で順序付けられていないリストに問題があります。サイドバーでは正常にレンダリングされますが、コンテンツセクションでは、何らかの理由で最初の箇条書きがコンテナの右端に浮かび、テキストが正常に表示され、他のすべての箇条書きとテキストは正常に配置されます。このバグは、他の主要なブラウザでは発生しません。

これがコードと何が起こっているかのスクリーンショットです。

<h2>Education</h2>
<div class="education">
    <h3>Institution Name</h3>
    <p class="date">Date 1000<br />~ Date 2000</p>
    <p class="description">Vel augue ac a adipiscing? Facilisis. Dictumst vut rhoncus ut scelerisque, duis mid! Amet ultricies parturient cursus amet? Cum, diam sed platea ultrices in, phasellus augue amet.</p>
    <ul>
        <li><span>Masters of Design</span></li>
        <li><span>fagjfjfhdgsdf</span></li>
        <li><span>Random blabble text</span></li>
    </ul>
    </div>

.education ul{margin-left:120px;}
#sidebar{}
.education ul li,
#sidebar ul li{list-style:square; font-size:18px; line-height:18px;}
.education ul li span,
#sidebar ul li span{font-size:13px; color:#3C3225;}
ul{color:#11c9c7;}

IE7およびGoogleChromeのバグ画像

奇妙なことに、IE6とIE8で動作するので、通常と同じようにコーディングしているのでかなり混乱しています。サイドバーulは、示されているのと同じコードを使用すると問題なくレンダリングされます。誰かがこれを引き起こしている可能性があることを知っていますか？

4

1 に答える 1

5

これをスタイルシートに追加します。

ul { clear: left; }

あなたの（私が想定しているのはpタグです）段落にはfloat: left、明示的な幅が指定されているようです。ただし、ulはまだ段落を左側に保持しようとしており、その奇妙な結果を生成しています。

于 2010-01-16T20:37:20.370 に答える