आईई 8 ओवरफ्लो: अधिकतम ऊंचाई के साथ ऑटो

मेरे पास एक तत्व है जिसमें बहुत बड़ी मात्रा में डेटा हो सकता है, लेकिन मैं नहीं चाहता कि यह पृष्ठ लेआउट को बर्बाद कर दे, इसलिए मैंने अधिकतम-ऊंचाई: 100px और ओवरफ़्लो सेट किया है: auto </कोड>, स्क्रॉलबार को तब दिखाई देने की उम्मीद है जब सामग्री फिट न हो।

यह फ़ायरफ़ॉक्स और आई 7 में ठीक काम करता है, लेकिन IE8 व्यवहार करता है जैसे ओवरफ़्लो: छुपा ओवरफ़्लो: ऑटो के बजाय मौजूद था।

मैंने ओवरफ़्लो: स्क्रॉल की कोशिश की, अभी भी मदद नहीं करता है, IE8 बस स्क्रॉलबार दिखाए बिना सामग्री को छोटा करता है। max-height को ऊंचाई में घोषित करना अतिप्रवाह कार्य को ठीक करता है, यह अधिकतम-ऊंचाई और ओवरफ़्लो का संयोजन है: auto जो चीजों को तोड़ देता है।

This is also logged as an official bug in the final, release version of IE8

क्या आसपास कोई काम है? अभी के लिए मैंने max-height के बजाय height का उपयोग करने का सहारा लिया है, लेकिन यदि अधिक डेटा नहीं है तो यह खाली जगह छोड़ देता है।

0
ro fr bn
नोट: यह IE9 में तय होता है (कम से कम, आरसी में)
जोड़ा लेखक Marc Gravell, स्रोत
पीपीएल के लिए सिर्फ एक नोट जो इसे बाद में ढूंढता है, मैंने देखा है कि IE8 में एक div पर अधिकतम ऊंचाई और ओवरफ़्लो सेट करना पूरे पृष्ठ को क्रैश करता है - जैसा कि पृष्ठ में पूरी तरह खाली रहता है, लेकिन पृष्ठ का शीर्षक दिखाया गया है। मज़ा मज़ा ...
जोड़ा लेखक James, स्रोत
हां, अधिकतम ऊंचाई और ओवरफ़्लो सेट करने से पृष्ठ को रेंडर नहीं किया जाता है (पूरी तरह खाली)। मैंने ओवरफ्लो-वाई पर स्विच किया क्योंकि यह मेरी ज़रूरतों के लिए काम करता था।
जोड़ा लेखक Wizard of Ogz, स्रोत

8 उत्तर

This is a really nasty bug as it affects us heavily on Stack Overflow with

code blocks, which have max-height:600 and width:auto.


यह IE8 के अंतिम संस्करण में कोई फिक्स के बिना एक बग के रूप में लॉग है।
http://connect.microsoft.com/IE/feedback/ViewFeedback। aspx? FeedbackID = 408,759
वास्तव में, वास्तव में हैकी सीएसएस वर्कअराउंड है:
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 
}

और निश्चित रूप से सशर्त सीएसएस के रूप में दूसरों ने उल्लेख किया है, लेकिन मैं इसे नापसंद करता हूं क्योंकि इसका मतलब है कि आप प्रत्येक पृष्ठ अनुरोध में अतिरिक्त HTML क्रॉफ्ट की सेवा कर रहे हैं।
0
जोड़ा
+1 लेकिन मेरी इच्छा है कि मैं इसे +10 कर सकता हूं ...
जोड़ा लेखक Sam Saffron, स्रोत
यह आईई 8 में काम नहीं करता है!
जोड़ा लेखक kheya, स्रोत
मुझे माइक्रोसॉफ्ट लिंक पर 404 मिल रहा है।
जोड़ा लेखक Craig Walker, स्रोत
विस्तार के लिए धन्यवाद: my.opera (लिंक) अब बंद है?
जोड़ा लेखक ptim, स्रोत
मुझे नहीं लगता कि किसी को पता है कि माइक्रोसॉफ्ट लिंक कहाँ ले जाया जा सकता था?
जोड़ा लेखक Mike Gwilt, स्रोत
आईई बहुत घृणित है
जोड़ा लेखक tom10271, स्रोत
{
overflow:auto
}

Div ओवरफ़्लो आज़माएं: ऑटो

0
जोड़ा

मैंने इसे आरसी 1 में एक निश्चित बग के रूप में लॉग किया। लेकिन मुझे एक भिन्नता मिली है जो एक कठिन जोर देने की विफलता का कारण बनती है। इन दो शैलियों को घोंसला वाली तालिका में शामिल करता है।



<head>
    <title>Test</title>
    
</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>
0
जोड़ा

प्रजनन करना:

(यह पूरे पृष्ठ को दुर्घटनाग्रस्त करता है।)

<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>

(और, पागलपन, ऐसा करता है। [Div में कोई सामग्री बिल्कुल नहीं।])

<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>
0
जोड़ा

इसी तरह की स्थिति, आवंटित स्थान में फिट करने के लिए जेएस द्वारा अधिकतम अधिकतम सेट के साथ एक पूर्व तत्व, चौड़ाई 100%, अतिप्रवाह ऑटो। यदि सामग्री maxHeight से छोटी है और क्षैतिज रूप से फिट बैठती है, तो हम अच्छे हैं। यदि आप विंडो का आकार बदलते हैं तो सामग्री क्षैतिज रूप से फिट नहीं होती है, एक क्षैतिज स्क्रॉलबार दिखाई देता है, लेकिन सामग्री की ऊंचाई के बावजूद, तत्व की ऊंचाई तुरंत पूर्ण अधिकतम तक पहुंच जाती है।

जेफ द्वारा वर्णित सीएसएस हैक के विभिन्न रूपों का प्रयास किया, लेकिन ऐसा कुछ भी नहीं मिला जो जेएस खराब-पैरामीटर त्रुटि नहीं था।

सबसे अच्छा मुझे लगता है कि यानी 8 के लिए अपना जहर चुनना था: या तो अधिकतम हाइट सीमा को छोड़ दें, इसलिए तत्व किसी भी ऊंचाई (मेरे मामले के लिए सबसे अच्छा) हो सकता है, या अधिकतम हाइट की बजाय ऊंचाई निर्धारित कर सकता है, इसलिए यह हमेशा लंबा होता है भले ही सामग्री स्वयं ही हो बहुत छोटा बहुत आदर्श नहीं है। यानी 9 में बेकार व्यवहार चला गया है।

0
जोड़ा
{max-height:200px, Overflow:auto}

श्रीनिवास तामादा के लिए धन्यवाद, उपरोक्त कोड ने मेरे लिए काम किया है।

0
जोड़ा

केवल अधिकतम ऊंचाई सेट करें और ओवरफ़्लो सेट न करें। इस तरह यह स्क्रॉल बार दिखाएगा यदि सामग्री अधिकतम ऊंचाई से अधिक है और सामग्री अधिकतम सीमा से कम है तो घट जाती है।

0
जोड़ा

I found this : https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/

This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the max-height at 333px 1 for IE and all standards-compliant browsers:

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

और यह मेरे लिए पूरी तरह से काम करता है इसलिए मैंने इसे साझा करने का फैसला किया।

0
जोड़ा