僅當CSS包含語法錯誤時才顯示Openlayers地圖

我正嘗試創建一個顯示幾乎全屏地圖的網頁。地圖應該填充頁眉和頁腳之間的空白。這是我的代碼至今：僅當CSS包含語法錯誤時才顯示Openlayers地圖

HTML：

<header> 
    <div class="mainBodyElement" id="header"> 
    </div> 
</header> 

<div id="content"> 
    <div id="map"></div> 
</div> 

<footer> 
    <div class="mainBodyElement" id="footer"> 
     <p>&copy; 2013</p> 
    </div> 
</footer>

的Javascript：

var map; 

function initOpenLayers() { 
    /* Example code from openlayers.org */ 
    map = new OpenLayers.Map({ 
     div: "map", 
     layers: [ 
     new OpenLayers.Layer.OSM("OSM (without buffer)"), 
     new OpenLayers.Layer.OSM("OSM (with buffer)", null, { 
      buffer: 2 
     })], 
     controls: [ 
     new OpenLayers.Control.Navigation({ 
      dragPanOptions: { 
       enableKinetic: true 
      } 
     }), 
     new OpenLayers.Control.PanZoom(), 
     new OpenLayers.Control.Attribution()] 
    }); 

    map.addControl(new OpenLayers.Control.LayerSwitcher()); 
    map.zoomToMaxExtent(); 
} 

$(document).ready(function() { 
    initOpenLayers(); 
});

CSS：

<!-- <> --> 
* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    overflow: hidden; 
} 
html, body { 
    width: 100%; 
    max-width: 100%; 
    height: 100%; 
    max-height: 100%; 
} 
.mainBodyElement { 
    position: absolute; 
    width: 100%; 
    overflow: hidden; 
} 
#header { 
    top: 0; 
    left: 0; 
    height: 50px; 
    background-color: #2CA07A; 
    color: white; 
} 
#footer { 
    top: auto; 
    bottom: 0; 
    height: 34px; 
    width: 100%; 
    overflow: hidden; 
    background-color: #2CA07A; 
    color: white; 
} 
#content { 
    position: fixed; 
    top: 50px; 
    left: 0; 
    right: 0; 
    bottom: 34px; 
    overflow: auto; 
    background: #EEE; 
} 
/* login 
    ----------------------------------------------------------*/ 
#login { 
    float: right; 
    display: block; 
    font-size: .85em; 
    margin: 0 0 10px; 
    text-align: right; 
} 
#login a { 
    background-color: #d3dce0; 
    margin-left: 10px; 
    margin-right: 3px; 
    padding: 2px 3px; 
    text-decoration: none; 
} 
#login .email { 
    background: none; 
    margin: 0; 
    padding: 0; 
    color: #CCCCCC; 
} 
#login ul { 
    margin: 0; 
} 
#login li { 
    display: inline; 
    list-style: none; 
} 
#map { 
    width: 100%; 
    height: 100%; 
}

我創建了一個小提琴（http://jsfiddle.net/palpitation/MUKRe/3/）的顯示一個工作示例（當您放大時，它會填滿），但它也顯示我的問題：

的CSS的第一行是：

<!-- <> -->

這是無效的語法，因爲它是在一個CSS塊，但如果我忽略它，地圖將不會顯示。即使我只省略該行的<>部分，地圖也不會再顯示。我很茫然，真的不知道如何在沒有這種奇怪的代碼的情況下繼續工作。如果我保持這個界限，Visual Studio會一直關注無效的語法。我不喜歡有無效的語法來保持我的代碼運行，所以我希望有人能告訴我我在這裏做錯了什麼。

來源

2013-06-12 Leonard

您的無效，並導致第一組大括號中的規則中斷。這個css，

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    overflow: hidden; 
}

隨着你的怪異的代碼行應該被刪除，並且一切都應該罰款。具體而言，它是* {overflow: hidden;}這是罪魁禍首。

來源

2013-06-12 14:42:51 dezman

我不知道，只有第一組花括號會在這種情況下打破。這確實是答案。非常感謝你的非常明確的答案。 – Leonard

overflow: hidden;

是問題

來源

2013-06-12 14:44:48 koningdavid

這確實是答案，但不是很清楚，因爲css中有多個「overflow：hidden」。 – Leonard

僅當CSS包含語法錯誤時才顯示Openlayers地圖

回答

相關問題