Luty 24, 2010 Kategorie: Internet Explorer, xhtml/css - Brak Komentarzy

Internet Explorer 6 kontra max/min-height max/min-width

Przy bardziej zaawansowanych stronach stosowanie max/min-height czy max/min-width staje się wręcz niezbędne. Te bardzo przydatne style jednak nie są obsługiwane przez IE6. Ten wpis pomoże Ci to zmienić!

MIN-HEIGHT/WIDTH

Pomimo tego, że IE6 nie wie co znaczy min-height, min-width. Zachowuje się w stosunku do height i width dokładnie w ten sam sposób, jak normalne przeglądarki do min-height/width. Mianowicie ustala stałą wysokość/szerokość jednak gdy przybywa content’u pozwala na rozszerzenie się elementu blokowego. A my to wykorzystamy !

ROZWIĄZANIE MIN-HEIGHT

1
2
3
4
5
#box {
        min-height:  100px;  /*Dla normalnych przeglądarek*/
        height: auto !important; /*ukrycie stałej wartości dla normalnych*/
        height: 100px; /*Dla IE6*/
}

ROZWIĄZANIE MIN-WIDTH

1
2
3
4
5
#box {
        min-width:  100px;  /*Dla normalnych przeglądarek*/
        width: auto !important; /*ukrycie stałej wartości dla normalnych*/
        width: 100px; /*Dla IE6*/
}

MAX-HEIGHT/WIDTH

O ile z minimalną wartością poradziliśmy sobie dość gładko przy pomocy samego css’a. To maksymalna wartość będzie wymagała użycia expression (o expression kiedyś więcej w osobnym temacie). A expression wymaga, żeby użytkownik miał włączony JavaScript i to jest jego wada. Z całym szacunkiem, ale kto wyłącza JS w przeglądarce. Ponieważ jest to mały, a nawet bardzo mały odsetek internautów uważam expression za b. dobry sposób radzenia sobie z bugami w IE.
Opis kodu dla obu przypadków na dole.

ROZWIĄZANIE MAX-WIDTH

1
2
3
4
5
#box {
        _width: expression( document.body.clientWidth > 299 ? "300px" : "auto" );
        max-width: 300px;
        overflow: hidden;
}

ROZWIĄZANIE MAX-HEIGHT

1
2
3
4
5
#box {
        _height: expression( this.scrollHeight > 299 ? "300px" : "auto" );
        max-height: 300px;
        overflow: hidden;
}

Opis kodu:

  • 2.Zaczynamy od _ (więcej o hakach css). Twoja edycja tego wiersza sprowadza się do zmiany wartości 299 i 300 na własne, wyrażone oczywiście w px. Pierwsza wartość musi być mniejsza od drugiej o 1, ponieważ ustawienie równych wartości może spowodować zawieszenie się przeglądarki
  • 3. Kod dla przeglądarek zgodnych ze standardami
  • 4. W ten sposób zapewniamy sobie, że powyżej maksymalnej wartości naszego pudełka wszystko zostanie ucięte. Bo przecież chyba głównie o to chodzi w max-width/height.

Przetestowane pod: IE6, IE7, IE8, FF2.x, FF3.x, Opera, Google Chrome, Safari.

Leave a Reply

«
»