我正在处理一个具有嵌套 p、div 和 li 的 ol 的页面。Internet Explorer 6 和 7 都在末尾的 p 元素之后（在 li 标记的最底部）呈现 ol 标记的数字，而不是像预期的那样在最外层 li 的顶部。我正在使用 PowerPC Mac，无法进行任何测试。是否有一些简单的 CSS hack 可以使此渲染与 Firefox 中的渲染相同？
您可以在此处查看实时页面。我知道，我正在定位侧边栏。暂时忽略它。
标记如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/whats_included.css" />
<script type="text/javascript" src="script/compliant_target_blank.js"></script>
<!--[if lte IE 5]>
<script type="text/javascript" src="script/ie_5_unsupported_warning.js"></script>
<![endif]-->
<!--[if gt IE 5]>
<link rel="stylesheet" type="text/css" href="css/ie_hacks/global.css" />
<![endif]-->
<title>
The Daily Plan-It, LLC - Home of the Tax MiniMiser
</title>
</head>
<body>
<?php include("includes/nav_bar.php") ?>
<div id="content">
<img src="images/title.png" alt="Tax MiniMiser Financial Tracking System" />
<div id="bordered_wrapper">
<h1>Here's What You Get With The Tax MiniMiser!</h1>
<h2>24 Envelopes, 7-hole punched to fit one-at-a-time in your binder</h2>
<ol>
<li class="main_item">
Business Income & Expense Record
<div class="preview_image">
<a href="previews/large/bier/front.html" rel="external">
<img src="images/small_previews/large/bier_preview.jpg" alt="" /><br/>
Click to Preview!
</a>
</div>
<div class="details">
<ul>
<li>12 receipt envelopes with all the income & expense columns you need to transform your planner or binder into a daily tax journal!</li>
<li>Store daily receipts in the convenient pocket envelopes.</li>
</ul>
</div>
<p>To get a free copy of the "20 Column Heading Guidelines", <a href="files/downloads/20_column_heading_guidelines.pdf">click here</a> or call our Fax-on-Demand line at 888-829-8237.</p>
</li>
<li class="main_item">
Vehicle Mileage & Expense Record
<div class="preview_image">
<a href="previews/large/vme/front.html" rel="external">
<img src="images/small_previews/large/mileage_preview.jpg" alt=""/><br/>
Click to Preview!
</a>
</div>
<div class="details">
<ul>
<li>12 receipt envelopes to track your daily mileage and vehicle expenses. Keep one envelope in each vehicle used for your business(es).</li>
<li>Store daily receipts in the convenient pocket envelopes.</li>
</ul>
</div>
<p>To get a free copy of the "Instructions for Vehicle Mileage & Expense Record", <a href="files/downloads/vehicle_record_instructions.pdf">click here</a> or call our Fax-on-Demand line at 888-829-8237.</p>
</li>
<li class="main_item">
Annual Business Summary of Income and Expense
<div class="preview_image">
<a href="previews/large/cover/inside.html" rel="external">
<img src="images/small_previews/large/cover_inside_preview.jpg" alt="" /><br/>
Click to Preview!
</a>
</div>
<div class="details">
<ul>
<li>Enter the subtotals from all the envelopes throughout the year. Then you and your tax pro can figure out profitability and taxes to maximize your deductions and legally minimize your taxes.</li>
</ul>
</div>
</li>
</ol>
<p class="end">To see previews of the small (6" x 8½") Tax MiniMisers, visit their respective pages <a href="products.php">here.</a></p>
</div>
</div>
<?php include("includes/footer.php") ?>
</body>
</html>
和CSS：
#content {
background-color: white;
}
#bordered_wrapper {
margin-left: 26px;
background: top left no-repeat url(../images/borders/yellow-box-top.gif);
}
#bordered_wrapper h1, #bordered_wrapper h2 {
margin-left: 20px;
}
#bordered_wrapper h1 {
padding-top: 15px;
margin-bottom: 0;
}
#bordered_wrapper h2 {
margin-top: 0;
font-size: 1.3em;
}
ol {
font-size: 1.1em;
}
ul {
list-style-type: disc;
}
li.main_item {
width: 700px;
clear: right;
}
li p {
clear: both;
margin-bottom: 20px;
}
.preview_image {
width: 200px;
float: right;
text-align: center;
margin-bottom: 10px;
}
.preview_image a {
text-decoration: none;
}
.preview_image img {
border-style: none;
}
.end {
clear: right;
padding-bottom: 25px;
padding-left: 20px;
background: bottom left no-repeat url(../images/borders/yellow-box-bottom.gif);
}