Perfection or Vanity

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Rozwiązanie problemu overflow: auto w IE

04 kwietnia 2006

Costa w swoim ostatnim e-mailu poskarżył mi się na nieprawidłową obsługę overflow: auto w Internet Explorerze. Wynalazł hacka aby IE zaczął respektować zasady wystającej treści poprzez nadanie jej szerokości.

  1. <!--[if lte IE 6]>
  2. <style type="text/css">
  3. pre {
  4. width: 100%;
  5. }
  6. </style>
  7. <![endif]-->

Lecz nie jest to rozwiązanie optymalne. Problemem tutaj występującym jest dodanie scrollbarów także w pionie. Głównie przez to że po zaaplikowaniu szerokości element dostaje layout i renderowanie wariuje (screen). Wygląda to paskudnie i równie paskudnie się takie pole obsługuje.

Myślałem nad tym trochę i po przewertowaniu MSDN okazało się, że Internet Explorer wspiera overflow-x oraz overflow-y. Wystarczy teraz razem z ustawieniem szerokości na 100% dodać takie linie (wszystko nadal w komentarzu warunkowym):

  1. pre {
  2. width: 100%;
  3. overflow-x: auto;
  4. overflow-y: hidden;
  5. }

A pozbędziemy się zbędnych pionowych scrollbarów (screen). Czy jednak na pewno zbędnych? IE ma tendencje do obcinania ostatniej linijki tak obsługiwanego elementu. Suwaki umożliwiały (kulawy) dostęp do niej. Zaznaczyć także się jej nie da. Więc na zdrowy rozum należy dodać padding o wysokości jednej linii tekstu - 1em.

  1. pre {
  2. width: 100%;
  3. overflow-x: auto;
  4. overflow-y: hidden;
  5. padding-bottom: 1em;
  6. }

Efekt końcowy (screen) na stronie testowej jest zadowalający. Padding dolny można zwiększyć odrobinę, aby nadać więcej przejrzystości.

Tagi wpisu:

Informacje i hiperłącza

To ja! Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

Informacje o wpisie

Napisał riddle 04 kwietnia 2006 o 23:14

Kategorie: CSS, Internet Explorer, Przeglądarki

Dodaj do:

Wpisy archiwalne

Archiwum miesięczne

Komentarze

  1. zwierzak 1 05 kwietnia 2006, 07:06

    Tak właściwie to powinno być to 1.2em (bo to tylko wysokość M, a przecież musi być jeszcze miejsce na ogonki niektórych liter), ale takto porada się przyda. Szkoda, że aby stworzyć ładną stronę trzeba stosować od groma hacków

    PS. Chyba coś ci się ze stroną stało, że styl się nie stosuje.

  2. Riddle 2 05 kwietnia 2006, 07:07

    Faktycznie, 1.2em lepiej.

    PS: Na górze strony taki napis jest ciekawy, coś w ten deseń:
    "Co się stało z moim szablonem?…"

  3. zwierzak 3 05 kwietnia 2006, 07:09

    Przynajmniej widać kto stosuje się do stanadrdów XHTML ;) u mnie widać by tylko było tableke, trzeba w końcu na DIVy się przerzucić (inne strony już od dawna robie na divach)

  4. Cyprian 4 23 kwietnia 2006, 14:54

    Przybywam z problemem...
    mam 2 główne divy - pierwszy to div zawartości serwisu, drugi zaś to div stopki, który znajduje się pod divem pierwszym. Div 1 ustalony ma width (aby mozna bylo wycentrowac go wzgledem okna przegladarki) oraz posiada overflow: auto, gdyz bez tego div stopki wchodzi mi na 1 diva :/ W divie 1 posiadam inne divy tworzące stronę. Problem polega na tym, że gdy powiększam czcionkę (ctrl +) div 1 główny scrolluje się w pionie i divy przez tego scrolla wchodzą na siebie, gdyż zabiera im powierzchnię. Gdy usunę overflow: auto wszystko jest ok, scroll się nie pojawia, ale jak mówiłem stopka wchodzi na tego diva. Po ustawieniu overflow: hidden jest ten sam problem :/

    Co z tym zrobić?

  5. Riddle 5 23 kwietnia 2006, 18:45

    Cyprian: http://perfectionorvanity.com/2005/10/13/sekcje-w-szablonach/ ?

  6. macem 6 05 sierpnia 2006, 14:08

    Również stosuje ten hack od dawna, jednak nie mogłem go wykorzystać w tabeli thead tbody -> tbody ma się scrolować, działa tylko w FF.

  7. Kyp 7 24 marca 2007, 22:14

    dzięki :) nawet nie spodziewałem się, że tak szybko rozwiążę ten problem :)

  8. mroofka 8 22 lutego 2008, 04:24

    Haj. Działa również zapodanie position: relative; dla diva który ma overflow’a, przy podobnej pozycji diva chowanego; także podanie 3x overflow: -x, -y, nic = sukces.

  9. reklama 9 14 stycznia 2009, 15:27

    dzięki, właśnie tego szukałem

  10. Isaura 10 21 kwietnia 2009, 20:36

    W końcu znalazłam. Bardzo dziękuję :)