Question

我在一个页面上有一个带有嵌套p，div和li的ol。 Internet Explorer 6和7都在末尾的p元素（在li标签的最底部）之后呈现ol标签的数字，而不是在预期的最外层li的顶部。我正在使用PowerPC Mac，无法进行任何测试。是否有一些简单的CSS hack使这个渲染与Firefox中的渲染相同？

您可以查看实时网页here。我知道，我正在努力定位侧边栏。暂时忽略它。

标记如下：

<!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 &amp; 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 &amp; 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 &quot;20 Column Heading Guidelines&quot;, <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 &amp; 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 &quot;Instructions for Vehicle Mileage &amp; Expense Record&quot;, <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&quot; x 8&frac12;&quot;) 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);
}

Answer 1

恭喜，您是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是一个没有明显目的的只读属性，因此在网页设计师遇到这个问题之前花了很长时间。较旧的网站（甚至Quirksmode.org！）仍然有页面建议填充填充，边距，甚至使用Javascript来解决这些问题。如果你可以帮助它，不要做这些事情。相反，看看你是否可以找出错误地给出hasLayout的元素，并更改有问题的CSS，使元素不再获得hasLayout。如果这完全打开了您的页面，请使用conditional comments来修复它仅适用于IE。以下是一些CSS规则，它们将“hasLayout”添加到一个尚未拥有它的元素中：

位置：绝对
float：left | right
display：inline-block
height：除'auto'以外的任何值
zoom：除“普通”以外的任何值（MS专有）
writing-mode：tb-rl（MS专有）

从IE7开始，溢出成为hasLayout的触发器。

溢出：隐藏|滚动|自动

最长版本：阅读以下文章。

以下是微软希望你做的所有事情by triggering "hasLayout"。
这是what web designers thought about hasLayout的干净语言版本，当他们发现正在发生的事情时。一些相同的内容，但包括CSS黑客和东西。

Answer 2

我刚刚在firefox 3 / webkit nightly / internet explorer 7中测试了你的示例html，并且所有这些都与顶部的数字完全相同。

问题可能在你的CSS中，你能告诉我们实际的页面被破坏吗？

Answer 3

同样，在WinXP Pro SP3上使用IE6测试，它显示正确。您应该提供一个重现问题的片段，或一个实时网页。也许环境很重要，或者现有的CSS等等。

Answer 4

实际上，我也碰到了这个bug。使用我的页面只会在使用javascript更改编号后发生。唯一可行的解决方案是使用：

vertical-align: top;

老实说，我不知道为什么IE7会这样做，但有一种简单的方法可以解决它。

Internet Explorer ol数字显示在li的底部，而不是按预期显示在顶部

4 个答案: