Html IE7中的UL校准问题
我很难找出IE7中无序列表的问题所在。有些子弹没有对准,有些根本就没有出现 第一组和第三组的CSSHtml IE7中的UL校准问题,html,css,internet-explorer,internet-explorer-7,html-lists,Html,Css,Internet Explorer,Internet Explorer 7,Html Lists,我很难找出IE7中无序列表的问题所在。有些子弹没有对准,有些根本就没有出现 第一组和第三组的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-siz
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;
}
第一组的HTML
<div class="col">
<h1>Exterior Services</h1>
<ul>
<li><a href="services-exterior-snow-removal.htm">Snow & Ice Removal</a></li>
<li><a href="services-exterior-landscaping.htm">Landscaping & 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 & 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 & Lighting</a></li>
<li><a href="services-interior-plumbing-hvac.htm">Plumbing & 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-->
第2组的HTML
<div id="sidebar">
<h3>exterior Services</h3>
<ul>
<li><a href="services-exterior-snow-removal.htm">Snow & Ice Removal</a></li>
<li><a href="services-exterior-landscaping.htm">Landscaping & 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 & 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 & Lighting</a></li>
<li><a href="services-interior-plumbing-hvac.htm">Plumbing & 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-->
外部服务
内部服务
24/7/365
不要使用列表样式图像。使用CSS背景。您无法轻松控制列表样式图像的位置
另外,不要设置LI
标记的样式,设置A
-标记的样式并使用显示:block
请参见我的教程:
谢谢,这很有效。只是恼火的是,它的工作方式太愚蠢了。lol.list-style-image已经很旧了,而且你在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;
}
<div id="sidebar">
<h3>exterior Services</h3>
<ul>
<li><a href="services-exterior-snow-removal.htm">Snow & Ice Removal</a></li>
<li><a href="services-exterior-landscaping.htm">Landscaping & 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 & 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 & Lighting</a></li>
<li><a href="services-interior-plumbing-hvac.htm">Plumbing & 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-->