Числа в Internet Explorer отображаются в нижней части li вместо верхней, как и ожидалось - PullRequest
4 голосов
/ 21 сентября 2008

Я работаю над страницей, имеющей ol с вложенными p, div и li. Internet Explorer 6 и 7 отображают числа для тега ol после элемента p в конце (в самом, самом низу тега li), а не в верхней части самого внешнего li, как и ожидалось. Я работаю на 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 &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);
}

Ответы [ 4 ]

12 голосов
/ 25 сентября 2008

Поздравляем, вы стали жертвой свойства 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. Если это полностью мешает вашей странице, используйте условные комментарии , чтобы исправить это только для IE. Вот некоторые правила CSS, которые добавляют hasLayout к элементу, у которого его еще нет:

  • позиция: абсолютная
  • float: left | right
  • дисплей: встроенный блок
  • высота: любое значение, отличное от 'auto'
  • zoom: любое значение, кроме «Normal» (проприетарная MS)
  • режим записи: tb-rl (проприетарный MS)

Начиная с IE7, переполнение стало триггером для hasLayout.

  • переполнение: скрыто | прокрутка | авто

Самая длинная версия: прочитайте следующие статьи.

  1. Вот все изящные вещи, которые Microsoft хотела бы, чтобы вы сделали , вызвав "hasLayout" .
  2. Вот версия на чистом языке , которую веб-дизайнеры подумали о hasLayout , когда узнали, что происходит. Некоторые из того же контента, но включают в себя CSS хаки и прочее.
0 голосов
/ 06 февраля 2010

На самом деле, я столкнулся с этой ошибкой. С моей страницей это произошло только после изменения нумерации с помощью javascript. Единственное реальное доступное решение - это использование:

vertical-align: top;

Честно говоря, я понятия не имею, почему IE7 делает, но есть простой способ это исправить.

0 голосов
/ 21 сентября 2008

То же самое здесь, протестировано с IE6 на WinXP Pro SP3, показывает правильно. Вы должны предоставить фрагмент, воспроизводящий проблему, или живую веб-страницу. Возможно, учитывается среда или существующий CSS и т. Д.

0 голосов
/ 21 сентября 2008

Я только что протестировал ваш пример html в firefox 3 / webkit nightly / internet explorer 7, и все они отображались точно так же, как и число вверху, где оно должно быть.

Возможно, проблема в вашем CSS, можете ли вы показать нам настоящую страницу, которая сломана?

...