与文本对齐的IE7问题

我在我的网站上有一组列。每个项目在<li>内是<a>，并且是<ul>的成员。列的设置使最上面的<li>与下面的<li>在同一个列表（<ul>）中具有不同的等级。与文本对齐的IE7问题

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

下面是它应该如何看（最新版本的谷歌Chrome浏览器）：

I Love Google Chrome

这里是如何看起来在IE7（看起来> = IE8罚款）：

I Hate 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（我拿出任何东西，没有与定位--such如字体，重量和字体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只是不喜欢两个单独的CSS类附加到一个列表。

来源

2013-08-05 cbronson

如果你不能找到解决办法，然后尝试'的位置是：绝对的; left：0'代替'text-align：left'。你也需要给父元素定位。 –

我能弄明白。对于这个问题，今后任何人在这里是一个简单的解决办法：

看来，IE7对列表元素的缩进/保证金的错误。为了解决这个问题，我修改了<li>元素，使其具有100％的定义宽度，以便填充<ul>的整个区域。这允许文本左对齐正确。

增加了以下内容：

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

来源

2013-08-05 17:15:51 cbronson

不要为锚标签定义text-align属性..李中使用它。即

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

来源

2013-08-05 09:02:40

这没有奏效。它确实帮助我找到答案。谢谢！ – cbronson

与文本对齐的IE7问题

回答

相关问题