تظهر أرقام Internet Explorer ol أسفل li بدلاً من الأعلى كما هو متوقع

StackOverflow https://stackoverflow.com/questions/110305

سؤال

أنا أعمل على صفحة تحتوي على ol متداخلة مع p's وdiv's وli's.يعرض كل من 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);
}
هل كانت مفيدة؟

المحلول

تهانينا، أنت ضحية لـ 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" إلى عنصر لا يحتوي عليه بالفعل:

  • موضع:مطلق
  • يطفو:يسار|يمين
  • عرض:مضمنة كتلة
  • ارتفاع:أي قيمة بخلاف "تلقائي"
  • تكبير:أي قيمة غير القيمة "العادية" (ملكية MS)
  • وضع الكتابة:tb-rl (ملكية MS)

اعتبارًا من IE7، أصبح التجاوز بمثابة مشغل لـ hasLayout.

  • تجاوز:مخفي|التمرير|تلقائي

النسخة الأطول:إقرأ المقالات التالية.

  1. إليك كل الأشياء الرائعة التي تود Microsoft أن تفعلها عن طريق تشغيل "hasLayout".
  2. إليك نسخة اللغة النظيفة من ما فكر به مصممو الويب حول hasLayout عندما اكتشفوا ما كان يحدث.بعض المحتوى نفسه، ولكنه يتضمن اختراقات وأشياء أخرى لـ CSS.

نصائح أخرى

لقد اختبرت للتو مثال HTML الخاص بك في Firefox 3/webkit nightly/internet Explorer 7 وتم عرضها جميعًا بنفس الطريقة تمامًا مع الرقم الموجود في الأعلى حيث يجب أن يكون.

من المحتمل أن تكون المشكلة في CSS لديك، هل يمكنك أن تعرض لنا الصفحة الفعلية المعطلة؟

نفس الشيء هنا، تم اختباره باستخدام IE6 على WinXP Pro SP3، ويظهر بشكل صحيح.يجب عليك تقديم مقتطف يعيد إنتاج المشكلة، أو صفحة ويب مباشرة.ربما تكون البيئة مهمة، أو CSS الموجود، وما إلى ذلك.

في الواقع، لقد واجهت هذا الخطأ أيضًا.مع صفحتي لم يحدث ذلك إلا بعد تغيير الترقيم باستخدام جافا سكريبت.الحل الحقيقي الوحيد المتاح إلى حد ما هو استخدام:

vertical-align: top;

بصراحة ليس لدي أي فكرة عن سبب عمل IE7، ولكن هناك طريقة سهلة لإصلاحه.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top