文本对齐的IE7问题

Question

我的网站上有一套专栏。每一项都是<li>中的一个<li>和<ul>的一个成员。列的设置是为了使最顶部的<li>与相同列表(<ul>)中较低的<li>有不同的类。

在IE7中，顶部的<li>元素将不与其相邻的较低的<li>元素适当地对齐。

以下是它的外观(谷歌Chrome的最新版本)：

​

​

下面是它在IE7中的外观(在>=IE8中看起来很好)：

​

​

**不要介意大小不同。*

下面是单个列的裁剪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 (为了可读性，我提取了与定位无关的任何东西，比如字体大小和字体大小)

.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只是不喜欢将两个单独的CSS类附加到一个列表中。

Answer 1

我想出了办法。对于将来有此问题的任何人，这里有一个简单的解决方法：

看来IE7在列表元素上有缩进/页边距错误。为了解决这个问题，我修改了<li>元素，使其具有100%的定义宽度，这样它们就可以填充<ul>的整个区域。这样，文本就可以正确地对齐。

增加了以下内容：

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

Answer 2

不要为锚标记定义文本对齐属性。用在李里。i.e

ul.site-map li{
    text-align:left;
}