Uiteindelijk bleek het vrij simpel om de lay in IE niet dwars door het hele beeld heen te laten marcheren... Dat betekent dat alles -- afgezien van afgeronde hoekjes, zo op het oog -- goed wordt weergegeven in IE8+, zolang je niet met die gare compatibiliteitsmodus gaat zitten fucken. Wow.
IE7 katapulteert, voor zover ik kan zien, het header- en sidebar-gedeelte ver naar rechts, wat de navigatie lastiger maar niet 100% onmogelijk maakt. IE7 heeft half zoveel gebruikers als IE8 op dit moment, en dat wordt alleen nog maar minder. Fuck IE7.
Maar wat was het nou?
Uiteindelijk bleek de boosdoener een <sidebar> binnen een <header>; de specs zeggen dat dat niet mag, maar de "normale" browsers waar ik dat onder test -- Safari, Firefox, Opera, in die volgorde -- slikten het. De enige die pas in de pas ging lopen toen ik die <sidebar> naar een <div> omzette -- en daarmee en passant de HTML validerend kreeg -- was IE.
Dat is apart, want IE kent heel die HTML5-elementen niet eens!
Je moet aan het begin van je HTML een stukje javascript gooien dat die elementen "genereert", en dan geef je ze in CSS een beetje de standaard stijlen (display: block enzo), en dan werkt het verder wel, maar IE zou verder helemaal geen semantische kennis over die elementen moeten hebben. Het zou gewoon het zoveelste block-level element moeten zijn. Dat gaat blijkbaar toch niet helemaal op...
Mocht iemand een zinnige verklaring hebben: I'm all ears. In de tussentijd wens ik de IE-gebruikers ook van harte welkom...