谷歌地圖不顯示在IE 11

我有以下標記與上述問題。所有在FF和Chrome中都可以正常工作，但它不適用於所有版本的IE。地圖已初始化，但您只能看到灰色矩形。 Full code is here：谷歌地圖不顯示在IE 11

<!doctype html> 
<html> 
<head> 
    <script type="text/javascript" 
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDGCfF8PovjNXwEq42KcdIiIjPgNTNh5tI&sensor=true"> 
    </script> 
    <style> 
     .popup-window { position: absolute; z-index: 3000; top: 50%; left: 50%; background-color: #fff; border-radius: 10px; padding: 20px 30px; 
      -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5); 
      -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5); 
      box-shadow:   0px 1px 5px 0px rgba(0, 0, 0, 0.5); 
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box; 
      } 
     .popup-window_map-search {width: 1200px; height: 616px; margin: -230px auto auto -600px; } 
     .popup-window__content:after { content: " "; display: table; clear: both; } 
     .popup-window__map-container { margin-top: 20px } 
     .search_block {display: table-cell; width: 360px; padding-right:18px; vertical-align: top} 
     .search-list__wrapper {border: 1px solid #cccccc; border-radius: 3px; margin-top: 10px; max-height: 417px; overflow: auto} 
     .search-list li {padding: 6px 20px 7px; font-size: 14px; color: #404040; cursor: pointer; } 
     .map_block {display: table-cell; width: 758px; border: 1px solid #cccccc; border-radius: 3px;} 
    </style> 

    <script> 
     function init() { 
      map = new google.maps.Map(document.getElementById('google-map'), { center: { lat: 78, lng: 22 }, zoom: 6 }); 
     } 
    </script> 
</head> 
<body class="site-body" onload="init()"> 
<div class="popup-window popup-window_map-search"> 
    <div class="popup-window__content"> 
     <div class="popup-window__map-container"> 
      <div class="search_block"> 

       <div class="search-list__wrapper"> 
        <ul class="search-list"> 
         <li>One</li> 
         <li>Two</li> 
         <li>3</li> 
         <li>4</li> 
         <li>5</li> 
         <li>6</li> 
         <li>7s</li> 
         <li>8</li> 
         <li>9</li> 
         <li>10</li> 
        </ul> 
       </div> 
      </div> 
      <div id="google-map" class="map_block"> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

在此先感謝。

來源

2015-02-09 Arnold_Brhen

什麼版本的IE不起作用？ – geocodezip 2015-02-09 20:26:51

我已經在IE 11中測試過它，並且地圖不顯示。 – 2015-02-10 04:56:03

您需要爲地圖容器設置高度（.map-block）。
IE似乎不喜歡display: table-cell;定位。

我能夠通過兩者.map-block和.search-block元件設置爲display: inline-table;（和高度設定爲地圖元件）來實現相同的設計。測試IE10，工作正常。

來源

2015-02-10 08:29:06 MrUpsidown

是的。謝謝。谷歌地圖在表中是一個壞主意。 – 2015-02-10 08:42:48

谷歌地圖不顯示在IE 11

回答

相關問題