Google地图在 IE 11 中不显示

Question

针对上述问题，我有以下标记。在 FF 和 Chrome 中一切正常，但并非在所有版本的 IE 中都有效。地图已初始化，但您只能看到一个灰色矩形。完整代码在这里：

<!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>

提前致谢。

Answer 1

您需要为地图容器设置高度 (.map-block)。
IE 似乎不喜欢 display: table-cell; 的定位。

通过将 .map-block 和 .search-block 元素都设置为 display: inline-table;（并为地图元素设置高度），我能够实现相同的设计。在 IE10 上测试，工作正常。

Google地图在 IE 11 中不显示

Google maps is not displayed in IE 11

internet-explorer

google-maps

google-maps-api-3