Kérlek támogasd egy szavazattal a WebPillangót!

Ha úgy érzed, hogy segítségre találtál a WebPillangón vagy a fórumon, vagy ha csak segíteni szeretnél, minden nap támogathatsz egy szavazattal (amíg a verseny tart).

Szólhatsz ismerőseidnek, szavazhatsz az iskolából, egyetemről, munkahelyről és otthonról is. Minden nap tudsz szavazni annyiszor, ahány internethozzaférésed van.

Új, minőségi leírásokkal hálálom a szavazatokat!

Rég nem írtam minőségi leírásokat, mivel nagyon kevés az időm. Viszont azt megígérhetem, hogy minden 100 szavazatot egy új leírással fogok meghálálni!. A barátaidnak se felejts el szólni :)



Nagyon szépen köszönöm!


Internet Explorer height probléma

Írta: Tupacko | 2009. június 08. | kategóriák: (X)HTML, CSS, Design

Bizonyára már többen is belefutottak abba a problémába, hogy míg a legtöbb böngésző helyesen kezeli azt a megszorítást miszerint egy elem magassága nulla, addig az Internet Explorer különféle bajokat okoz. Hol is vehetjük hasznát egy nulla magasságú elemnek? Például van, hogy több float-olt elemet el szeretnénk választani az oldal egy lebegés mentes részétől: a tartalom és az oldalléc lebeg és elszeretnénk választani a lábléctől.

Egy elméleti megoldás az elválasztási problémára, hogy készítünk egy CSS osztályt, ami magassága nulla és clear: both tulajdonsággal bír. A gond az, hogy bár a Firefox és az IE 8 helyesen kezel minden esetet, ahol a height paramétert valamiféleképpen lenulláztuk, az IE 6 és IE 7 különbözően viselkednek.
Tételezzük fel, hogy a továbbiakban az alábbi osztály különféle height értékek változataival fogunk dolgozni:

1
2
3
4
5
6

.float-clear {
  float: none;
  clear: both;
  overflow: hidden;
  height: 0%;
}

Height: 0

A height: 0 esetet az Internet Explorer 6 kivételével minden más böngésző szépen kezeli. Sajnos az IE 6 nem nullázza le a magasságot és függőleges irányban széttolja a weboldal arculatát.

Height: none

A height: none esetet az Internet Explorer 7 kivételével minden más böngésző szépen kezeli (IE 6 is!). Sajnos az IE 7 esetében az a gond, mint az előző esetben az IE 6 torzításával.

A megoldás

Néhány próbálkozás után rájöttem, hogy van egy olyan height érték is, amire mindhárom használatban lévő IE és egyéb böngészők is egyformán viselkednek (pixelpontosan böngészőfüggetlen oldalt készítettem ezzel a módszerrel). A megoldás abban áll, hogy a height: 0, height: 0 none vagy height: none helyet egyszerüen azt írjuk: height: 0%. Igaz mennyire egyszerű? Köszönjük IE!

  • Stumbleupon
  • Delicious
  • Google Buzz


Értékeld a bejegyzést!

Loading ... Loading ...

A bejegyzésre érkező kommenteket elérheted RSS 2.0 formájában vagy emailben is:

A bejegyzéshez tartozó trackback cím, illetve a permalink.

A megjegyzéseket kérlek, tedd fel érthető és illendő módon, ne fikázz le másokat, mert nem tudnak valamit, amit te már igen. A kommentár lehetőleg függjön a bejegyzéshez :)

kötelező
kötelező, titok marad
ha nincs, maradjon üres



Köszi tupacko! Sajna a Ie. vs többi böngésző háborúban okos cselekhez kell folyamodnunk hogy győzelmet érjünk el! :)

codee47 2009. július 12. - 12:09

Nagyon szivesen :)

Avatar Tupacko
2009. július 12.
14:37

Van valami, amit tud az internet explorer 6? Hát ez meglepő….

http://isite.hu/internet_hirek/internet-explorer-6/20090724/hal%C3%A1l-az-ie6-ra

isite 2009. július 24. - 03:18