تجاوز سعة IE8: تلقائي مع أقصى ارتفاع

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

سؤال

لدي عنصر قد يحتوي على كميات كبيرة جدًا من البيانات، لكنني لا أريد أن يفسد تخطيط الصفحة، لذا قمت بتعيينه max-height: 100px و overflow:auto, على أمل ظهور أشرطة التمرير عندما لا يكون المحتوى مناسبًا.

كل شيء يعمل بشكل جيد في Firefox وIE7، ولكن IE8 يتصرف كما لو كان overflow:hidden كان حاضرا بدلا من overflow:auto.

حاولت overflow:scroll, ، لا يزال لا يساعد، IE8 ببساطة يقتطع المحتوى دون إظهار أشرطة التمرير.تغيير max-height إعلان ل height يجعل الفائض يعمل بشكل جيد، إنه مزيج من max-height و overflow:auto الذي يكسر الأشياء.

يتم تسجيل هذا أيضًا كـ خطأ رسمي في النسخة النهائية من IE8

ايوجد اي عمل في هذه المنطقه؟في الوقت الحالي لجأت إلى استخدام height بدلاً من max-height, ، لكنه يترك الكثير من المساحة الفارغة في حالة عدم وجود الكثير من البيانات.

هل كانت مفيدة؟

المحلول

يعد هذا خطأ سيئًا حقًا لأنه يؤثر علينا بشدة في Stack Overflow <pre> كتل التعليمات البرمجية، والتي لديها max-height:600 و width:auto.

تم تسجيله كخطأ في الإصدار النهائي من IE8 بدون إصلاح.

http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759

يوجد حل بديل لـ CSS مخترق حقًا:

http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode

/*
SUPER nasty IE8 hack to deal with this bug
*/
pre 
{
    max-height: none\9 
}

وبالطبع CSS الشرطي كما ذكر الآخرون، لكنني لا أحب ذلك لأنه يعني أنك تقدم المزيد من أدوات HTML في كل طلب صفحة.

نصائح أخرى

{
overflow:auto
}

حاول تجاوز سعة القسم: تلقائي

لقد رأيت هذا مسجلاً كخطأ ثابت في RC1.لكنني وجدت تباينًا يبدو أنه يتسبب في فشل تقديم التأكيد الصعب.يتضمن هذين النمطين في جدول متداخل.

<!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>
    <title>Test</title>
    <style type="text/css">
    .calendarBody
    {
        overflow: scroll;
        max-height: 500px;
    }
    </style>
</head>
<body>
    <table>
    <tbody>
        <tr>
        <td>
            This is a cell in the outer table.
        <div class="calendarBody">
            <table>
                <tbody>
                <tr>
                    <td>
                    This is a cell in the inner table.
                </td>
                    </tr>
            </tbody>
                </table>
        </div>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>

{max-height:200px, Overflow:auto}

بفضل سرينيفاس تامادا، الكود أعلاه نجح معي.

في حالة مماثلة، تم تعيين عنصر مسبق مع الحد الأقصى للارتفاع بواسطة js ليناسب المساحة المخصصة، والعرض 100%، والتجاوز التلقائي.إذا كان المحتوى أقصر من maxHeight ويتناسب أيضًا أفقيًا، فهذا جيد.إذا قمت بتغيير حجم النافذة بحيث لم يعد المحتوى ملائمًا أفقيًا، فسيظهر شريط تمرير أفقي، لكن ارتفاع العنصر سينتقل فورًا إلى الحد الأقصى للارتفاع الكامل، بغض النظر عن ارتفاع المحتوى.

جربت أشكالًا مختلفة من اختراق css الذي ذكره Jeff، لكن لم تجد أي شيء مثله لا يمثل خطأ في معلمة js السيئة.

أفضل ما يمكن أن أجده هو اختيار السم الخاص بك لـ ie8:إما أن تقوم بإسقاط حد maxHeight، بحيث يمكن أن يكون العنصر بأي ارتفاع (الأفضل بالنسبة لحالتي)، أو قم بتعيين الارتفاع بدلاً من maxHeight، بحيث يكون دائمًا بهذا الطول حتى لو كان المحتوى نفسه أقصر بكثير.ليست مثالية للغاية.لقد ذهب السلوك المجنون في IE9.

قم بتعيين الحد الأقصى للارتفاع فقط ولا تقم بتعيين الفائض.بهذه الطريقة سيُظهر شريط التمرير إذا كان المحتوى أكثر من الحد الأقصى للارتفاع ويتقلص إذا كان المحتوى أقل من الحد الأقصى للارتفاع.

لإعادة إنتاج:

(يؤدي هذا إلى تعطل الصفحة بأكملها.)

<HTML>
<HEAD>
    <META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>

<BODY>
    look:

    <TABLE width="100%">
        <TR>
            <TD>
                <TABLE width="100%">
                    <TR>
                        <TD>
                            <DIV style="overflow-y: scroll; max-height: 100px;">
                                X
                            </DIV>
                        </TD>
                    </TR>
                </TABLE>
            </TD>
        </TR>
    </TABLE>
</BODY>
</HTML>

(حيث أن هذا يعمل بشكل جيد ...)

<HTML>
<HEAD>
    <META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>

<BODY>
    look:

    <TABLE width="100%">
        <TR>
            <TD>
                <TABLE width="100%">
                    <TR>
                        <TD>
                            <DIV style="overflow-y: scroll; max-height: 100px;">
                                The quick brown fox
                            </DIV>
                        </TD>
                    </TR>
                </TABLE>
            </TD>
        </TR>
    </TABLE>
</BODY>
</HTML>

(وبجنون، كذلك يفعل هذا.[لا يوجد محتوى في القسم على الإطلاق.])

<HTML>
<HEAD>
    <META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>

<BODY>
    look:

    <TABLE width="100%">
        <TR>
            <TD>
                <TABLE width="100%">
                    <TR>
                        <TD>
                            <DIV style="overflow-y: scroll; max-height: 100px;">
                            </DIV>
                        </TD>
                    </TR>
                </TABLE>
            </TD>
        </TR>
    </TABLE>
</BODY>
</HTML>

لقد وجدت هذا:https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/

تم التحقق من هذه الطريقة في IE6 ويجب أن تعمل أيضًا في IE5.ما عليك سوى تغيير القيم لتناسب احتياجاتك (يتم التعليق على الكود مع الملاحظات التوضيحية).في هذا المثال، نقوم بتعيين الحد الأقصى للارتفاع على 333 بكسل 1 لـ IE وجميع المتصفحات المتوافقة مع المعايير:

* html div#division { height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */ }

وهذا يعمل معي بشكل مثالي لذلك قررت مشاركة هذا.

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