Css OpenStreetMap覆盖地图分区位置

我开始学习OpenStreetMap/OpenLayers API，将地图放入我的web应用程序中。虽然我必须处理映射本身，但我发现包含映射的div不会停留在我放置它的位置。以下是我目前的代码：

maptest.htm

---

如果没有

onload=“init（）”

div，则div水平位于页面中央，从顶部向下一小段距离。但是，调用

init（）

后，div会弹回到左侧，就在标题下方。它仍然有正确的大小和边框，所以CSS样式没有被完全忽略，但我不明白为什么它没有保持在正确的位置？我尝试将CSS放入样式表而不是内联样式表中，同样的情况也发生了。

OpenLayers附带了一个默认样式表，其中包含以下CSS

div.olMap {
    margin: 0 !important;
}

这将覆盖内嵌css

页边距右侧：自动

，

页边距左侧：自动

，以及

页边距顶部：10%

您可以通过将首选样式应用于外部样式表（或内部）中的

#map

选择器来解决此问题

这是因为对ID选择器

#map

的引用的优先级高于类选择器

.olMap

---

已经修好了，谢谢！我发现OpenLayers如何定义div的边距很奇怪，更不用说用

覆盖现有的边距了！重要的

声明，它当然应该只关注div内部的内容，而不影响其位置？

function init() {

    Proj4js.defs["EPSG:27700"] = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs ";

    var EPSG27700  = new OpenLayers.Projection("EPSG:27700");
    var EPSG900913 = new OpenLayers.Projection("EPSG:900913");

    var map = new OpenLayers.Map("map",{
                    controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.PanZoomBar(),
                        new OpenLayers.Control.LayerSwitcher({'ascending':false}),
                        new OpenLayers.Control.ScaleLine(),
                        new OpenLayers.Control.KeyboardDefaults()
                    ]});

    var OSM = new OpenLayers.Layer.OSM("OpenStreetMap");
    var OSMcycle = new OpenLayers.Layer.OSM("OSM Cycle", ['http://a.tile.thunderforest.com/cycle/${z}/${x}/${y}.png',
                                                  'http://b.tile.thunderforest.com/cycle/${z}/${x}/${y}.png',
                                                  'http://c.tile.thunderforest.com/cycle/${z}/${x}/${y}.png']);

    map.addLayers([OSMcycle,OSM]);

    var position = new OpenLayers.LonLat(321550,507250).transform(EPSG27700,EPSG900913);

    var markers = new OpenLayers.Layer.Markers("Markers");
    map.addLayer(markers);
    markers.addMarker(new OpenLayers.Marker(position));

    var zoom = 13;

    map.setCenter(position,zoom);
}

div.olMap {
    margin: 0 !important;
}

#map {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 10% !important;
}