IE eigenaardigheden met css en iframes

Door Bubbles op donderdag 22 mei 2014 15:53 - Reacties (6)
Categorie: Programming, Views: 2.927

En zo kom je on-the-job nog eens achter dingen. Internet Explorer (zowel versie 8 als 10 getest) vinden een website niet zo tof als die in een iframe zit en op de html tags van die website een css "position: relative;" wordt gezet. Resultaat is dat de volledige website in die iframe niet getoond wordt. Andere browsers doen daar minder moeilijk over.

Nou kan je je afvragen waarom je HTML tags css wil meegeven, maar dat is (in ontwetendheid) makkelijker gedaan dan gedacht:

Cascading Stylesheet:
1
2
3
4
*
{
    position: relative;
}


Klaar is klara. Simpel gezegd gooit bovenstaande CSS op iedere tag in de pagina een relatieve positie. De <HTML>-tag inlcusief. Evenals nog een lading andere tags die er verder ook weinig aan hebben. Denk aan <HEAD>, <SCRIPT>, <META>, <LINK>], etc.

Dan kan je het probleem in Internet Explorer wel weer oplossen door het volgende stukje CSS toe te voegen aan het voorgaande:

Cascading Stylesheet:
1
2
3
4
html
{
    position: static;
}


En tada, je pagina in je iframe wordt wel weer gewoon geladen. Maar zoals gezegd, wat moet <HTML> met CSS? Nettere oplossing is natuurlijk om die generieke CSS te wijzigen en alleen toe te passen op datgene wat er ook daadwerkelijk wat aan heeft: je body.

Cascading Stylesheet:
1
2
3
4
body *
{
    position: relative;
}


Nu zit het alleen nog maar op al je elementen die binnen je body-tags vallen; daar waar het dan ook daadwerkelijk uitmaakt.

-bubbles out-

Volgende: CampZone - dag -1 07-'14 CampZone - dag -1
Volgende: Captain's log, stardate 14423.8 09-'13 Captain's log, stardate 14423.8

Reacties


Door Tweakers user crisp, donderdag 22 mei 2014 16:13

Waarom zou je in hemelsnaam al je elementen position: relative willen geven?

Gebruik van de universal selector (de * dus) is ook simpelweg bad practice... ;)

Door Tweakers user Bubbles, donderdag 22 mei 2014 16:41

Niet mijn code, ik kreeg er alleen wel mee te maken. ;)

Door Tweakers user NightFox89, donderdag 22 mei 2014 16:56

* is enorm vertragend bij grotere sites en inderdaad, alles standaard op relative zetten zal alleen maar meer koppijn veroorzaken.

Daarnaast kun je aan head elementen geen stijl koppelen. Ofja, je kunt ze wel koppelen maar een browser zou daar niets mee moeten mogen doen ;)

Door Tweakers user ameesters, donderdag 22 mei 2014 16:59

Ohja crisp? https://github.com/twbs/b...st/css/bootstrap.css#L881

Zurb Foundation gebruik ook een universal selector... dus het mag duidelijk zijn dat er zeker wel use-cases voor zijn waar de universal selector voor geschikt is...

Beetje knullig om te roepen dat het maar een bad-practice zou zijn.

Door Tweakers user WoutervOorschot, donderdag 22 mei 2014 23:15

Net even getest, in IE11 werkt het gewoon(en anders was dit ook geen reden geweest voor mij om chrome/FF/opera te gaan gebruiken). :)
http://imgur.com/a/wB9Zy

Door Tweakers user codebeat, vrijdag 23 mei 2014 07:12

Alle genoemde voorbeelden zijn ZO ONTZETTEND niet juist dat ik uberhaupt niet zou begrijpen waarom dit goed zou moeten gaan.

Nog steeds is IE niet de beste browser maar dit soort dingen is gewoon vragen om problemen.

Wat ik overigens wel een suf iets vind in Safari is het cookiegebruik in een iframe, cookies worden niet opgeslagen (niet toegestaan) wanneer je nog nooit rechtstreeks op de site ben geweest (de site day in de iframe wordt weergegeven). Ga je even naar de desbetreffende site toe dan werkt het daarna wel. Dat is niet in IOS maar wel op OSX. Da's pas suf.

Reageren is niet meer mogelijk