max-width-ie

Náhrada CSS vlastnosti max-width v zatím nejrozšířenějším prohlížeči - Microsoft Internet Exploreru, který tuto vlastnost zatím nepodporuje (verze nižší než 6).

Inspiraci jsem sbíral v následujících článcích:
Myslete elasticky s CSS [interval.cz]
Autoresize z IE6 ve všech prohlížečích [interval.cz]
Výsledek je vlastně jen syntézou informací z uvedených článků.

Tato stránka není dokonalá a ani takové ambice nemá - je spíš jen demonstrací možného řešení. Rozhodně mi uděláte radost, když mi napíšete, v jaké kombinaci MSIE + operační systém je tento postup funkční a v jaké ne. Průběžně sem budu tyto informace doplňovat a začnu hned.

1. Win98 SE + MSIE 6.0 SP1
2. WinXP SP2 + MSIE 6.0 SP2

1. Nejprve nastavím max-width pro prohlížeče, které to umí

   div#ukazka { max-width:550px; }

   a pro MSIE doplním

   div#ukazka { max-width:550px; _width:550px; }

   To mu sice nezabrání v roztažení prvku, pokud se do něj obsah na šířku nevejde, ale pokud se obsah vejde (jako například na této stránce) nebude šířka 550px překročena. Navíc tento zápis částečně řeší i případ, kdy je v MSIE vypnutý JavaScript - prvek nezabere veškerý dostupný prostor, ale pouze 550px.
2. Potom do stránky za

   <div id="ukazka"> Lorem ipsum ...</div>

   umístím následující kód, který bude vykonán pouze v MSIE:

   <!--[if IE]>
   <script type="text/javascript">
   function setmax()
   {
   if(document.body.clientWidth > 610)
   { sluvko.style.width="550px";}
   else
   { sluvko.style.width="auto";}
   }
   var sluvko=document.getElementById('ukazka');
   sluvko.style.width="auto";
   setmax();
   window.onresize=setmax;
   </script>
   <![endif]-->
   

   Tento script zajistí (narozdíl od použití expression) nastavení šířky prvku po každé změně velikosti okna.

Nástroje

• EV kalkulačka
• PinholeDesigner SE
• DPI kalkulačka
• Flash kalkulačka

• Kontrast analyzer [bookmarklet]
• fotoBookmarklety
• Bookmarklety (2.)

• Regulární výrazy [test]
• Regulární výrazy [replace]

• TYPO korektor

Články

• Regulace vytápění
• MAX-WIDTH-IE

XHTML 1.1, CSS 2.0