html - 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 背景。您无法轻松控制 list-style-image 的位置。

此外，不要设置 LI 标签的样式，设置 A 标签的样式并使用 display:block;

看我的教程:

preview.moveable.com/JM/ilovelists