1

サイトに一連の列があります。各項目は<a>内の で<li>あり、 のメンバーです<ul>。列は、同じリスト内の最上位の<li>クラスが下位のクラスとは異なるように設定されています ( )。<li><ul>

IE7 では、一番上の<li>要素は、その下に隣接する要素と適切に整列しません<li>。

これがどのように見えるかです（Google Chromeの最新バージョン）：

Google Chrome が大好き

これはIE7でどのように見えるかです（> = IE8ではうまく見えます）：

私はIE7が嫌いです

**サイズの違いは気にしないでください。*

これは、単一の列のトリミングされた HTML です。

 <div class="map-col" id="map-2">
    <ul class="site-map">
      <li><a class="map-upper">Services</a></li>
      <li><a href="#" class="map-lower">Wood Fencing</a></li>
      <li><a href="#" class="map-lower">Ornamental Iron</a></li>
      <li><a href="#" class="map-lower">Gates and Openers</a></li>
      <li><a href="#" class="map-lower">Restoration</a></li>
    </ul>
 </div>

CSS は次のとおりです (読みやすくするために、font-weight や font-size など、配置に関係のないものはすべて抜き出しました)。

.site-map{display:inline;}

.map-col{display:block; width:150px;}
.map-upper{text-align:left;}
.map-lower{*text-align:left;}


#map-1{float:left;}
#map-2{float:left;}
#map-3{float:left;}
#map-4{float:left;}

私が思う限り、IE7 は 2 つの個別の CSS クラスが 1 つのリストに追加されるのを好みません。

4

2 に答える 2

0

私はそれを理解することができました。将来この問題が発生した場合は、簡単な修正方法を次に示します。

IE7 には、リスト要素にインデント/マージンのバグがあるようです。これを回避するために、<li>要素の幅を 100% に定義して、要素が の領域全体を占めるように変更しました<ul>。これにより、テキストを正しく左揃えにすることができます。

以下を追加しました。

.site-map li{display:block; width:100%; text-align:left;}

于 2013-08-05T17:15:51.027 に答える