Wenn ihr ein Element (hier ein <div> mit einem img) auf eine Webseite stellt und es mit display: none versteckt, um es im Browser dynamisch anzupassen, kann es sein, dass ihr über einen kleinen feinen Unterschied zwischen dem IE und dem Rest der Browserwelt stolpert.
English Summary for „Internet Explorer, display:none, image width = 0“:
If it comes to hidden elements (display: none) on your website, your software may step over some subtle differences between Internet Explorer and for example FireFox. FireFox and IE implement „display:none“ elements in different ways that affect their width and height values.
IE und Firefox implementieren display:none unterschiedlich
Ich hatte per Plugin ein paar Zeilen in meine Seite eingefügt:
echo '<div id="bgimage" style="display: none; z-index: 0; overflow: hidden; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px;">' echo '<img src="'. plugins_url().'/hintergrundbild/images/'.$akt_image. '" alt="" width="'.$image_dims[0].'" height="'.$image_dims[1].'" style="z-index:1 ;" />'; echo '</div>';
Das Bild wollte ich im Browser per jQuery anpassen
...
var viewportWidth,viewportHeight,width_aspect_ratio,height_aspect_ratio,factor;
var bgimage=jQuery('#bgimage');
var imageWidth;
var imageHeight;
imageWidth=bgimage.find('img').attr("width");
imageHeight=bgimage.find('img').attr("height");
viewportWidth= jQuery(window).width();
viewportHeight= jQuery(window).height();
...
Das klappte auch beim FF ohne Probleme, aber der IE zeigte die Bilder nicht an.
Ursache war das „display:none“
Firefox baut das <div> so ein:
Internet Explorer ( Versionen 7-9) aber so:
Im ersten Fall waren die Bilddimensionen vorhanden, im zweiten Fall nicht.
Bilder nicht mit display: none verstecken
Also: in diesem Fall ist es besser, die Finger von display: none zu lassen und mit top:-32767 zu arbeiten.
