IE en HTML5/CSS3
Sinds gisteren heb ik problemen met de weergave van mijn HTML5-pagina's in IE8 en IE9.
Ik heb mijn site, www.cco-harderwijk.nl/kaartverkoop, gebouwd met HTML5 en CSS3 en bijv. het uitlijnen van de pagina en de grafische vormgeving van boxen is totaal van slag.
In Safari is alles nog oké.
Hebben jullie hier al iets van gemerkt?
Op de genoemde pagina zijn de header en footer niet meer uitgelijnd en heeft het inlogscherm geen ronde hoeken meer. Dit alles in IE8 en IE9. Kijk je deelfde pagina met Safari dan zie je het verschil
George
Ook FireFox geeft de pagina's goed weer.....
Gewijzigd op 13/06/2012 13:06:33 door George van Baasbank
En wat bedoel je met ineens? heeft je browser een update gekregen waarna dingen niet meer werken of heb je iets op je website veranderd?
Ik kan je screenshots geven. Zeg maar waar naar toe
Inmiddels heb ik ook met FireFox gekeken en ook die geeft de pagina's goed weer.
Wellicht heeft er toch een update van IE8 en IE9 plaatsgevonden
Gewijzigd op 13/06/2012 13:25:42 door George van Baasbank
Maar moet je footer niet buiten <article> staan?
Het probleem is dat IE de nieuwe elementen niet herkent, ze geen default display: block; meegeeft en daardoor geen element meer kan stijlen.
Je zou dus zeggen pak alle nieuwe HTML5 block elementen en geef die display: block; mee:
Code (php)
1
2
3
4
2
3
4
article, header, footer, nav, aside, hgroup, figure, figcaption, enz.
{
display: block;
}
{
display: block;
}
Helaas lost dit maar 1 ding op en niet het probleem die iets te moeilijk is om hier uit te leggen. De enige juiste oplossing is om HTML5shiv in te laden.
De werkelijke oorzaak bij mij lag aan IE9. Op de een of andere wijze was de Comptabiliteitsweergave aangevinikt. Vinkje weg en alles was weer bij het oude.
Ik heb wel je advies overgenomen om de code op te nemen in mijn css-bestand(en).
Wat HTML5shiv is/doet weet ik (nog) niet. Wellicht bied internet de oplossing
George
Comptabiliteitsweergave staat gelijk aan laten zien in IE8. Daarom moet je altijd deze metatag opnemen in je HEAD:
Code (php)
1
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Dit zorgt ervoor dat altijd de webpagina in de nieuwste versie wordt gedraait en als het Google Chrome Frame is geïnstalleerd wordt het via google geparsed.