Náhrada max-width a dalších vlastností pro MSIE
Určitě to všichni znáte a já samozřejmě také, ale nikde jsem nemohl vygooglit všechny čtyři známé finty pro náhradu čtyř CSS vlastností (max-width…
Určitě to všichni znáte a já samozřejmě také, ale nikde jsem nemohl vygooglit všechny čtyři známé finty pro náhradu čtyř CSS vlastností (max-width, min-width, max-height a min-height), které nepodporuje Internet Explorer.
Pavel Kout mě naštěstí zachránil a jeho tip mě nakopl správným směrem. Pro jistotu jsem se rozhodl, abych zase nezapoměl, že si vše raději poznamenám.
Níže naleznete konstrukce, které zajišťují (díky microsoftímu expressions) aby zmíněné CSS vlastnosti správně použil jak Internet Explorer tak i „normální“ prohlížeč.
Použitý zdroj je samozřejmě článek – max-width in Internet Explorer (Svend Tofte).
max-width
max-width: 800px;width: expression(document.body.clientWidth > 800? „800px“ : „auto“ );
min-width
min-width: 800px;width: expression(document.body.clientWidth < 800? „800px“ : „auto“ );
max-height
max-height: 300px;height: expression(this.scrollHeight > 300? „300px“ : „auto“ );overflow: hidden;
min-height
min-height: 300px;height: expression(this.scrollHeight < 300? „300px“ : „auto“ );overflow: visible;
Související:
- max-width in Internet Explorer – (Svend Tofte, 20.8.2003)
- Myslete elasticky s CSS – (Interval, Martin Snížek, 9.8.2004)
- Šířka stránek: fixní, natahovací, nebo jiná? Jaká jiná? – (Pixylophone, Petr Staníček, 17.5.2004)
- Jak psát web – CSS
Jirka Ch | 8. Leden 2005, 23:25 | „Články“ | Trvalý odkaz | Komentáře (8) | Štítky: css, tipy, webdesign
Komentáře:
Díky Jirko, podobné přehledy mám moc rád! Všechno pěkně na jednom místě, tak to má být..
Dík moc s timhle jsem se už něco natrápil! :-)
Jen si dovolím malé varování – když je ten hack na stránce použit vícekrát, tak občas dělá bordel; hlavně při scrollování anebo window-resize.
Pro typické použití min-heght u obtékaných boxů umístěných vedle sebe je vhodnější použít tohle:<pre>element { height: 300px; overflow: visible; }html>body element { min-height: 300px; height: auto; }</pre>
Já na min-height používám ten fígl, že vím, že Explorer chápe height jako min-height. Takže takhle:<pre> #prvek { min-height: 100px; /* pro standardní prohlížeče / _height: 100px; / pro Internet Explorer, který to chápe jako min-height*/ }</pre>
Potíž je v tom, že tohle funguje jen pro bloky, jejichž aktuální šířku můžeš předem spočítat. Tedy typicky pro body, taky se to pro to nejvíc používá. Ale nefunguje to obecně.
Taky je problém při změně velikosti viewportu, nelze spoléhat na to, že to expression přepočítá.
Psal jsem o tom na http://suplik.petnik.cz/index.php?… , kde uvádím spolehlivé a obecné řešení, bohužel tabulkou – takže to má zase jiné mouchy. V komentářích u toho spotu je Yuhůův návod na simulaci max-width.
Ad [4]: Ano, takhle to popisuje mj. i David Shea na Mezzoblue.
Ad [4]: A co když máš blok, chceš ho mít nějak velikej, ale při změně velikosti viewportu ho nechceš nechat moc se zmenšit. Na tohle, bohužel, tvoje řešení nefunguje.
ten min-width expression má tradiční bug, pokud se použije na DIV obalující např. stránku, tak pokud si zkusíte zmenšovat okno MSIE, zamrzne to na hranici toho spodního rozsahu v nekonečné smyčce… korektní je uvést alternativní styl pro MSIE (nejlépe podmíněné komentáře) a tam uvést (zde konkrétně pro DIV s id=„pagewrap“):
#pagewrap
{
width: 600px; /* for nonJSenabled MSIE */
width: expression(document.body.clientWidth900 ? „900px“ : „auto“ ) );
}
to by mělo zajistit minimální rozměr 600px a maximálně 900px v jednom řádku :-)
Jenže když na stavím výšku prvku, který obtéká, tak trošku odskočí, to je nějaký problém i s floatem v exploreru?