Internet Explorer OL号出现在li的底部而不是预期的顶部
时间：2020-03-06 14:30:02 来源:igfitidea点击:
我正在处理一个包含嵌套p，div和li的ol的页面。 Internet Explorer 6和7都在末尾的p元素之后(在li标签的非常非常底部)而不是在最外面的li顶部的p元素之后呈现ol标签的数字。我正在使用PowerPC Mac，无法进行任何测试。是否有一些简单的CSS技巧可以使此渲染与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);
}
解决方案
我刚刚在firefox 3 / webkit nightly / internet Explorer 7中测试了示例html，并且所有渲染的结果完全相同，并在顶部显示了相同的数字。
问题可能出在CSS中，我们可以向我们展示实际损坏的页面吗？
与此处相同，在WinXP Pro SP3上使用IE6进行了测试，它可以正确显示。我们应该提供一个重现该问题的代码片段，或者一个实时Web页面。也许环境很重要，或者现有的CSS等。
恭喜，我们是IE的hasLayout属性的受害者。
简短版：这次我们很容易。更改以下规则：
...
ol {
font-size: 1.1em;
}
...
li.main_item {
width: 700px;
clear: right;
}
...
对此：
...
ol {
font-size: 1.1em;
width: 700px;
}
...
li.main_item {
clear: right;
}
...
一切都很好。
较长的版本：将某些CSS规则应用于某些元素时，IE 5.5+会为这些元素提供一个名为" hasLayout"的属性，该属性会更改该元素的呈现方式。由于hasLayout是一个没有明显目的的只读属性，因此花了相当长的时间Web设计人员才开始关注该问题。较旧的网站(甚至是Quirksmode.org！)仍然有一些页面，建议我们旋转填充，边距，甚至使用Javascript来解决这些问题。如果我们能提供全部帮助，请不要执行这些操作。取而代之的是，看看是否可以找出错误地给了hasLayout的元素，并更改有问题的CSS，以使该元素不再获得hasLayout。如果这完全使页面感到厌烦，请使用条件注释将其修复，仅用于IE。以下是一些CSS规则，可将" hasLayout"添加到尚不包含的元素中：
- 位置：绝对
- 浮动：左|右
- 显示：内联块
- 高度："自动"以外的任何值
- 缩放："正常"值(MS专有)以外的任何值
- 写入模式：tb-rl(MS专有)
从IE7开始，溢出成为hasLayout的触发器。
- 溢出：隐藏|滚动|自动
最长版本：阅读以下文章。
- 这是微软希望通过触发" hasLayout"完成的所有整洁的事情。
- 这是Web设计师在发现正在发生的事情时所考虑的hasLayout的简洁语言版本。内容相同，但包括CSS hack和其他内容。
实际上，我也遇到了这个错误。对于我的页面，它仅在使用javascript更改编号后才发生。唯一可行的解决方案是使用：
vertical-align: top;
老实说，我不知道为什么IE7会这样做，但是有一种简单的方法可以修复它。
