Ich will mittels OpenLayers eine Karte in eine Webseite einbinden. Ich habe das OpenLayers-Beispiel aus dem Wiki genommen und etwas angepasst (den Code zum Laden der Karte in eine extra JavaScript-Datei ausgelagert). Also gibt es ein
setupMap.js:
function setupMap()
{
map = new OpenLayers.Map("map");
map.addLayer(new OpenLayers.Layer.OSM());
var lonLat = new OpenLayers.LonLat(11.7450785, 50.3158229).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
var zoom = 16;
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(lonLat));
map.setCenter (lonLat, zoom);
}
Die Situation ist eine lustige: die Höhe des Map-Elementes wird vom Inhalt bestimmt, das Element wird wird also “aufgedrückt”. Der Viewport im Inneren aber hat eine Höhenangabe von “100%”, die wird also vom Map-Objekt bestimmt. Da beißt sich die Katze in den Schwanz.
Der FF sucht offensichtlich bei einer Prozentangabe nach dem nächsten umgebenden Element, das eine sinnvolle Höhe hat (ist oft das ) und bezieht sich darauf.
Während der IE die 100% auf das direkt umgebende Element bezieht und 100% von 0 = 0 berechnet.
Übrigens kann man das IE-Verhalten im FF nachbilden, indem man dem Map-
ein “position: absolute” in den Style schreibt. Dann zeigt auch der keine Karte mehr an.