Skip to content

IE7 en display:inline-block

ie7

Had gisteren voor het eerst onenigheid met Internet Explorer 7. Meestal heb ik problemen met het bouwen van websites die onder Internet Explorer 6 moeten werken en aangezien deze browser zeer oud en nauwelijks meer ondersteunt is, zeer moeizaam meewerkt, maak ik websites niet meer standaard IE6 compatibel. Maar nu dus een Internet Explorer 7 probleem. Ik was bezig met het maken van een lijst van legenda elementen. Deze wilde ik weergeven als een lijst met display:inline.

Lege inline lijstelementen

Het probleem dat ik kreeg was dat ik deze lijstitems zonder inhoud wilde weergeven met een vaste breedte. In deze lijsten had ik ik linkankers <a></a> toegevoegd om zo links naar verscheidene kaarten te creëren. Waarschijnlijk vanwege het feit dat deze elementen leeg waren en mij een nog onduidelijke andere oorzaak storten de eerste twee lijst items in twee uls in in Safari en Chrome. Zodra ik display:inline uit commente verschenen ze weer met het volume dat ik ze had gegeven door middel van padding. En ja dimensies geven met width en height.. dat ging niet aangezien <li> daar niet mee werkt.

Display: inline-block

Toen stuitte ik naar Googelen op een display (=weergave) die ik nooit eerder had gebruikt: display:inline-block. Met deze display kun je  lijstelementen wel breedte en lengte geven zoals dat met block elementen kan geven en inline plaatsen. En zo – met dimensies – storte de lijstitems niet in in Webkitbrowsers zoals Chrome en Safari. Fantastisch! Todat ik zaken weer bekeek in IE7 in mijn VMWare Fusion virtuele box. Internet Explorer 7 bleek display:inline-block te negeren c.q. niet te ondersteunen. Major bummer!

Internet Explorer 7 fix

Maar er is gelukkig een oplossing ook al is het een hack. Door het element zoom:1 en *display:inline te geven geeft IE7 het element ook weer als inline element met blockkarakteristieken. Voorbeeld uit het stylesheet dat ik gebruikte voor <li> elementen:

#first-button, #second-button, #third-button, #fourth-button {
 width:100px;
 height:25px;
 display:inline-block;
 zoom:1; /* IE 7 Hack starts here*/
 *display:inline;
}

Uitleg

Met

zoom:1

trigger je de IE hasLayout – verborgen property – zodat het element volume krijgt en dus ook block elementeigenschappen krijgt. Normaal gesproken krijgen lijstelementen standaard geen layout. En met

*display:inline

geef je de lijst inlineweergave in Internet Explorer 7 en door de asterix wordt deze regel genegeerd door andere browsers.

NB Deze oplossing is exclusief de oplossing voor IE6

Bronnen:

http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html

http://www.quirksmode.org/css/display.html

http://www.brunildo.org/test/InlineBlockLayout.html

Gepubliceerd door Jasper Frumau op dinsdag 15 februari 2011

Van → Development

15 Reacties
  1. hb2011 permalink

    Hoi, Ik heb geprobeerd met je code te werken en het lukt mij niet. Ik weet niet waar ik de code moet laten. Misschien heb jij een tip? Ik heb al een post geplaatst op het wp forum, maar de dame die in eerste instantie zo enthousiast reageerde lijkt nu even druk met andere zaken.

    • Zet alle CSS a.j.b in een extern cssblad met de naam style.css. Normaal gesproken onder wp-content/themes/theme-naam/style.css. Gebruik geen interne CSS. Dit is namelijk lastig bij het later aanpassen van de CSS.
      Ik zag de html tag met inline-block inline, maar zo wordt niet de gehele hack toegepast dus de hack zou niet moeten werken onder IE7. Maar wellicht staat de gehele code elders. Door alle code in style.css in je themamap te hebben wordt dit allemaal duidelijker.

  2. hb2011 permalink

    Dank, het werkt! Ik heb een functie ‘inlinepictures’ geschreven en die toegevoegd aan mijn style.css:

    .inlinepictures {
    display:inline-block;
    zoom:1; /* IE 7 Hack starts here*/
    *display:inline;
    }

    Jouw link naar de CSS tutorial deed het! Om het te vergelijken met autotechniek: eerder was ik bougies aan het vervangen, zonder dat ik wist wat ze deden, nu begrijp ik weer een stuk meer!

    (overigens, heb ik geen width en height toegevoegd, zoals in het voorbeeld het kan zijn dat dat voor IE7 nodig is, maar ik heb hier IE8 en Chrome)

    • hb2011 permalink

      sorry, geen edit.
      NB met ‘geschreven’ bedoel ik natuurlijk: gecopy-pasted dankzij deze post!

  3. Sabine permalink

    Dank voor deze hack! Precies wat ik nodig had.

  4. Sabine permalink

    Kreeg wel een paar foutmeldingen toen ik deze reactie probeerde te posten!

    • Jasper permalink

      Goed om te horen dat deze post nuttig was. Welke foutmeldingen kreeg je tijdens het posten?

    • Sabine permalink

      Er waren verschillende fouten, met en zonder het ‘Houdt mij op de hoogte’ vinkje aan. Ik ga het nog een keer doen en dan de fouten plakken dus je krijgt een paar berichten. Deze is met het vinkje

    • Sabine permalink

      Er waren verschillende fouten, met en zonder het ‘Houdt mij op de hoogte’ vinkje aan. Ik ga het nog een keer doen en dan de fouten plakken dus je krijgt een paar berichten. Deze is met het vinkje:
      Warning: Cannot modify header information – headers already sent by (output started at /var/www/vhosts/doede.net/httpdocs/wp-includes/wp-db.php:1) in /var/www/vhosts/doede.net/httpdocs/wp-content/plugins/subscribe-to-comments/subscribe-to-comments.php on line 815

      Warning: Cannot modify header information – headers already sent by (output started at /var/www/vhosts/doede.net/httpdocs/wp-includes/wp-db.php:1) in /var/www/vhosts/doede.net/httpdocs/wp-comments-post.php on line 95

      Warning: Cannot modify header information – headers already sent by (output started at /var/www/vhosts/doede.net/httpdocs/wp-includes/wp-db.php:1) in /var/www/vhosts/doede.net/httpdocs/wp-comments-post.php on line 96

      Warning: Cannot modify header information – headers already sent by (output started at /var/www/vhosts/doede.net/httpdocs/wp-includes/wp-db.php:1) in /var/www/vhosts/doede.net/httpdocs/wp-comments-post.php on line 97

      Warning: Cannot modify header information – headers already sent by (output started at /var/www/vhosts/doede.net/httpdocs/wp-includes/wp-db.php:1) in /var/www/vhosts/doede.net/httpdocs/wp-includes/pluggable.php on line 866

    • Sabine permalink

      Er waren verschillende fouten, met en zonder het ‘Houdt mij op de hoogte’ vinkje aan. Ik ga het nog een keer doen en dan de fouten plakken dus je krijgt een paar berichten.

      Oh, ik zie dat de foutmelding hetzelfde is zonder het vinkje

    • Sabine permalink

      En je komt dus nooit meer terug op deze overzichtspagina na de foutmelding dus je weet ook niet of je bericht succesvol is verzonden

    • We zijn naar de problemen aan het kijken en we hebben wrs de oorzaak gevonden. Bedankt voor de heads up!

    • This is the pfeecrt post for me to find at this time

  5. Thanks! Dit had ik net nodig, en het werkt goed. Zal hopelijk niet lang meer duren dat IE7 nog ondersteund moet worden ;)

Trackbacks & Pingbacks

  1. hb2011 on "display: inline-block problem in IE 8" | Upgrade Wordpress Now

Laat een reactie achter

NB: XHTML is toegstaan. Je email adres wordt niet gepubliceerd.

Abonneer je op de reacties op dit artikel via RSS

*