IE8 overflow: auto cu max-înălțime

Am un element care poate conține cantități foarte mari de date, dar nu vreau să distrugă aspectul paginii, așadar am setat max-height: 100px și overflow: auto , sperând să apară barele de derulare când conținutul nu se potrivește.

Totul funcționează bine în Firefox și IE7, dar IE8 se comportă ca în cazul în care overflow: hidden este prezent în loc de overflow : auto .

Am incercat overflow: scroll , tot nu ajută, IE8 trunchiază pur și simplu conținutul fără a afișa barele de derulare. Modificarea declarației max-height la height face ca fluxul să funcționeze OK, este combinația max-height > care sparge lucrurile.

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

Există o soluție? Deocamdată am recurs la utilizarea height în loc de max-height , dar lasă mult spațiu gol în cazul în care nu există prea multe date.

 0
adăugat editat
Vizualizări: 10
sursa
fr hi bn
Notă: acest lucru pare a fi fixat în IE9 (cel puțin, în RC)
adăugat autor Marc Gravell, sursa
Doar o notă pentru ppl care găsește acest lucru mai târziu, am văzut setarea maximă a înălțimii și a depășirii pe un div în IE8, care a lovit întreaga pagină - ca și în pagină, rămâne complet necompletată, dar este afișat titlul paginii. Distracție, distracție ...
adăugat autor James, sursa
Da, setarea maximă a înălțimii și a depășirii a provocat o pagină care să nu fie afișată (complet necompletată). Am trecut la supraîncărcare, de când a lucrat pentru nevoile mele.
adăugat autor Wizard of Ogz, sursa

8 răspunsuri

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.



Este înregistrat ca o eroare în versiunea finală a IE8, fără a fi fixat.



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



Există o soluție cu adevărat dificilă pentru 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 
}




și, bineînțeles, CSS condițional, așa cum au menționat și alții, dar nu-mi place asta pentru că înseamnă că deservici o cruce HTML extra în fiecare solicitare de pagină.
0
adăugat
sursa
+1 dar mi-aș dori să pot +10 asta ...
adăugat autor Sam Saffron, sursa
Acest lucru nu funcționează în IE8!
adăugat autor kheya, sursa
Am 404 pe linkul Microsoft.
adăugat autor Craig Walker, sursa
mulțumesc pentru detaliu: my.opera (legat) este acum închis?
adăugat autor ptim, sursa
Nu presupun că cineva știe unde ar putea fi mutată legătura Microsoft?
adăugat autor Mike Gwilt, sursa
IE este atât de dezgustător
adăugat autor tom10271, sursa 
{
overflow:auto
}

Încearcă div overflow: auto

0
adăugat
sursa

Am văzut acest lucru înregistrat ca un bug fix în RC1. Dar am găsit o variație care pare să provoace o greșeală de a afirma că eșuează. Implică aceste două stiluri într-o masă imbricată.



<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
adăugat
sursa

A reproduce:

(Aceasta blochează întreaga pagină.)

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

(În timp ce acest lucru funcționează bine ...)

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

(Și, nebun, așa face și acest lucru.

<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
adăugat
sursa

Situație similară, un pre element cu maxHeight setat de JS pentru a se potrivi în spațiul alocat, lățimea 100%, auto overflow. Dacă conținutul este mai scurt decât maxHeight și se potrivește și pe orizontală, suntem buni. Dacă redimensionați fereastra astfel încât conținutul să nu se mai potrivească orizontal, apare o bară de derulare orizontală, dar înălțimea elementului sare imediat la maxHeight maxim, indiferent de înălțimea conținutului.

Au încercat diverse forme ale hack-ului CSS menționat de Jeff, dar nu au găsit nimic asemănător, care nu era o eroare de parametru rău-parametru.

Cel mai bun lucru pe care l-am putut găsi a fost să-ți aleg otrava pentru ie8: fie să renunți la limita maxHeight, deci elementul poate fi orice înălțime (cel mai bine pentru cazul meu) sau setați înălțimea mai degrabă decât maxHeight, deci este întotdeauna atât de înalt, chiar dacă conținutul în sine este mult mai scurtă. Foarte nu este ideal. Comportamentul sparte a dispărut în ie9.

0
adăugat
sursa 
{max-height:200px, Overflow:auto}

Mulțumită lui Srinivas Tamada, Codul de mai sus a funcționat pentru mine.

0
adăugat
sursa

Setați numai înălțimea maximă și nu setați depășirea. În acest fel, va apărea bara de defilare dacă conținutul este mai mare decât înălțimea maximă și se micșorează dacă conținutul este mai mic decât înălțimea maximă.

0
adăugat
sursa

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 */ }

și asta funcționează perfect pentru mine, așa că am decis să împărtășesc acest lucru.

0
adăugat
sursa