IE7中的UL对齐问题

Question

我无法弄清楚我的无序列表在IE7中出现了什么问题。有些子弹未对齐，有些根本没有出现。

http://dl.bearce.me/bullet-problem.jpg

组1和组3的CSS

ul { 
    color: #C20000; 
    list-style: square url("../images/li-square.jpg"); 
    margin: 0 0 25px 15px; 
} 

    ul li { 
     color: #333; 
     font-family: Arial, sans-serif; 
     font-size: 14px; 
     font-weight: normal; 
     line-height: 24px; 
    } 

/* (specific to Group 3 */ 

    ul.half { 
     float: left; 
     width: 295px; 
    } 
    ul.third { 
     float: left; 
     width: 191px; 
    } 

第1组的HTML

<div class="col"> 
    <h1>Exterior Services</h1> 
    <ul> 
     <li><a href="services-exterior-snow-removal.htm">Snow &amp; Ice Removal</a></li> 
     <li><a href="services-exterior-landscaping.htm">Landscaping &amp; Maintenance</a></li> 
     <li><a href="services-exterior-parking-lots.htm">Parking Lot Maintenance</a></li> 
     <li><a href="services-exterior-window-washing.htm">Windows &amp; Power Washing</a></li> 
     <li><a href="services-exterior-general-repair.htm">General Repair Maintenance</a></li> 
    </ul> 
</div><!--/.col--> 
<div class="col"> 
    <h1>Interior Services</h1> 
    <ul> 
     <li><a href="services-interior-janitorial.htm">Janitorial</a></li> 
     <li><a href="services-interior-electrical.htm">Electrical &amp; Lighting</a></li> 
     <li><a href="services-interior-plumbing-hvac.htm">Plumbing &amp; HVAC</a></li> 
     <li><a href="services-interior-maintenance.htm">Preventative Maintenance Programs</a></li> 
     <li><a href="services-emergency.htm">Emergency Services</a></li> 
    </ul> 
</div><!--/.col--> 

第3组的HTML

<ul class="half" style="width:345px;">     
    <li>Back-up generators and power supply</li> 
    <li>Carbon monoxide detectors</li> 
    <li>Circuit-breaker conversions</li> 
    <li>Electrical upgrades</li> 
    <li>Fuse and breaker change-outs</li> 
    <li>Indoor and outdoor lighting (including security)</li>     
</ul>    
<ul class="third"> 
    <li>Low-voltage wiring</li> 
    <li>Safety inspections</li> 
    <li>Smoke detectors</li> 
    <li>Surge protection</li> 
    <li>Switches, sockets and outlets</li> 
    <li>Troubleshooting</li>     
</ul> 

组2的CSS

#sidebar ul { 
    list-style: disc url("../images/li-disc.jpg"); 
    list-style-position: inside; 
    margin: 0; 
} 

    #sidebar ul li { 
     border-bottom: 1px solid #dadada; 
     color: #000; 
     font-weight: bold; 
     padding: 5px 0; 
    } 

    #sidebar ul li:first-child { 
     border-top: 1px solid #dadada; 
    } 

第2组的HTML

<div id="sidebar"> 

    <h3>exterior Services</h3>    
    <ul> 
     <li><a href="services-exterior-snow-removal.htm">Snow &amp; Ice Removal</a></li> 
     <li><a href="services-exterior-landscaping.htm">Landscaping &amp; Maintenance</a></li> 
     <li><a href="services-exterior-parking-lots.htm">Parking Lot Maintenance</a></li> 
     <li><a href="services-exterior-window-washing.htm">Windows &amp; Power Washing</a></li> 
     <li><a href="services-exterior-general-repair.htm">General Repair Maintenance</a></li> 
    </ul> 
    <h3>interior Services</h3> 
    <ul> 
     <li><a href="services-interior-janitorial.htm">Janitorial</a></li> 
     <li><a href="services-interior-electrical.htm">Electrical &amp; Lighting</a></li> 
     <li><a href="services-interior-plumbing-hvac.htm">Plumbing &amp; HVAC</a></li> 
     <!-- <li><a href="services-interior-maiintenance.htm">Interior Maintenance</a></li> --> 
    </ul> 
    <h3>24/7/365</h3> 
    <ul> 
     <li><a href="services-preventative-maintenance.htm">Preventative Maintenance Programs</a></li> 
     <li><a href="services-emergency.htm">Emergency Services</a></li> 
    </ul> 

</div><!--/#sidebar--> 

Answer 1

不要使用列表样式图像。使用CSS背景。您无法轻松控制列表样式图像的位置。

此外，不要风格的LI标签，风格A标志和使用display:block;

见我的教程：

preview.moveable.com/JM/ilovelists